DAUN HIJAU: BLOG

Tampilkan postingan dengan label BLOG. Tampilkan semua postingan

Senin, 08 Juli 2013

Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog

Berbagi pengalaman pribadi membuat efek lipatan kertas pada ujung kanan blog yang menurut saya agak lumayan bikin pusing sob,

maklumlah masih pemula,, heheheheee,,,,

bagi sobat yang berminat untuk membuat lipatan kerta pada ujung blog silakan ikuti lankah-langkah berikut ini ya sobat:

1. Silahkan Login ke akun blogger anda.

2. Lalu masuk ke design Template, klik Edit HTML

3. Seperti Biasa Centang Expand Template Widget

4. Kemudian cari kode berikut </body>

5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>var tujuan ='http://Alamat Url Feeds Sobat'</script>

<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>

6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save ya sob)

Keterangan:

Kode warna hijau: ganti dengan URL Feeds sobat
Kode warna kuning: ganti apabila sobat ingin mengganti gambar sesuai selera sobat.

Ikuti langkah-langkah berikut ini bila sobat ingin mengganti gambarnya.

Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.

1. Setelah sobat selesai download silakan sobat buka script tersebut dengan Notepad.

2. Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) sobat cari url berikut dalam text dan silakan ubah dengan url gambar sobat:

http://petir-project.googlecode.com/files/fedkcl.png

(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)

3. Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) sobat ubah url berikut dengan url gambar sobat:

http://petir-project.googlecode.com/files/feed.png

4. Setelah selesai merubah kode URL gambar tersebut Sobat Save Text, selanjutnya silakan sobat upload text tersebut dan ganti URL http://petir-project.googlecode.com/files/ktb4.js dengan URL hasil upload sobat tadi.

NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.

Selamat mencoba ya sobat,,

Rabu, 03 Juli 2013

Cara Cek Berat Loading Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Assalamualaikum sobat blogger sekalian. Apa kalian sudah pada tidur???

Belum kan.........!!! Oke deh kali ini aku mau posting Cara Cek Berat Loading Blog. Hal ini wajib dilakukan untuk mengetahui seberapa berat loading blog kita. Agar saat blog kita ada yang berkunjung tidak menggerutu, "Berat amat sih loading blognya !!!", atau " Nih blog lelet banged !!!!, close aja, cari yang lain !!"
Jangan sampai itu terjadi pada blog kita. Maka dari itu kita perlu dan wajib mengetahui berat loading blog kita.
Untuk ketentuan berat loading blog :
Antara 40 - 80 = Ringan
Antara 80 - 100 = Normal
antara 100 - 150 = Sedikit Berat
Diatas 150 = Berat.

Apabila blog kita mencapai 200 lebih, aku sarankan untuk merombak lagi templtae kalian. Usahakan bisa sampai dibawah 100. Agar loading blog kita lancar dan tanpa gangguan.
Untuk mengeceknya, silahkan masukkan Url blog sobat dikotak yang sudah aku sediakan. Untuk Url tanpa www, atau http://, cukup Url blog sobat langsung. Misalnya afinzdi.blogspot.com

Cara Menambahkan Font di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Oke Sobat-sobat ayo ayo bikin font di blog lebih keren. Gimana caranya???
Mudah gan, ga ada yang ga mungkin didunia ini. Bahkan bila kita bermimpi jadi Presiden pun itu mungkin saja terjadi pada kita. Tergantung dari usaha kita sendiri-sendiri. Oke-oke langsung aja.

1. Masuk ke alamat disini
2. Setelah masuk pilih jenis font yang kalian suka. Setelah itu klik add to collection

3. Setelah itu pilih use yang ada dibawah.

4. Setelah itu copy semua kode yang diberikan

5. Setelah selesai semua sekarang kita mulai diblog kita. Login ke dasbor blogger>Template>Edit html

6. Cari kode <![CDATA[/*, jika sudah ketemu pastekan kode yang tadi diatas kode <![CDATA[/* tadi. tambahkan tanda slash diakhir kode yang diberikan dari google tadi. jadi seperti ini

<link href='http://fonts.googleapis.com/css?family=Fondamento:400,400italic' rel='stylesheet' type='text/css'/>
Kemudian pratinjau template, jika benar simpan template anda.

Cara Membuat Effect Gambar Terang saat ditunjuk Pointer

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Kali ini aku mau posting Cara Membuat Effect Ganbar Terang saat ditunjuk Pointer dan sebaliknya. Maklum baru bisa ngeblog, jadi ya posting tutorial yang udah lama diposting. Oke deh langsung saja disimak yaa Cara Membuat Effect Ganbar Terang saat ditunjuk Pointer.

1. Seperti biasa agan muzti masuk ke dasbor kalian, terus template kemudian edit html
2. Kalian cari kode .post-body-img, atau .post-img
3. Jika tidak ada maka yang harus kalian lakukan adalah copy kode dibawah ini dan letakkan diatas kode ]]></b:skin>

Gelap Menjadi Terang

.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

Terang Menjadi Gelap

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

4. Untuk yang sudah ada pada No.2, silahkan tambahkan kode yang berwarna merah saja
5. Simpan template kalian dan lihat hasilnya

Cara Membuat Animasi Loading setiap Klik diblog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Aku mau kasi Cara Membuat Animasi Loading setiap Klik diblog yang aku dapet dari blog djadisaputra. Disitu aku liat blognya keren juga, tiap aku ngklik ada animasi loadingnya. Jadi aku penasaran nyari kodenya, ternyata disitu udah ada scriptnya. Sekarang aku mau posting kekalian semua sapa tau bermanfaat buat kalian. Oke deh simak aja ya Cara Membuat Animasi Loading setiap Klik diblog.

1. Kalian musti masuk dasbor blogger kalian. Kalian masuk ke template kalian, terus edit html.
2. Kalian cari kode ]]></b:skin> pake Ctrl +F biar cepet. Terus copy kode dibawah ini dan letakan diatas kode ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

3. Kalian cari kode </head> terus taruh kode dibawah ini diatas kode </head>

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

4. Yang terakhir copy kode dibawah ini terus taruh diatas kode </body>

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});

// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>

5. Simpan template kalian.

*info
Pemasangan animasi loading ini akan memberatkan proses loading blog anda. Jadi saya sarankan untuk memikirkan lagi pemasangan ini

Cara Menghilangkan Tulisan Showing Post with Label pada Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara Menghilangkan Tulisan Showing Post with Label pada Blog. Ya ini yang aku cari-cari. Sebel banget liat blogku kalo pas aku milih kategori berdasarkan label slalu ada tulisan Showing Post with Label. Karena aku pengen ngilangin itu aku cari caranya dimbah google. Eh dapet. Terus aku praktekin berhasil. Sekarang aku mau bagikan kekalian siapa tau bermanfaat. Oke deh disimak langsung aja

1. Login kedasbor blogger kalian masing-masing
2. Pilih template kalian, kemudian edit html
3. kalian cari kode yang sama seperti ini

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

4. Sudah ketemu. Ganti kode tsb dengan kode dibawah ini

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

5. Simpan deh template kalian. Selesai deh

Cara Membuat Tanda Tangan di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Udah siang gini masih ngedep depan laptop doank, ga mandi, ga cuci muka. Duuuuh gimana baunya??? >.<
Hehehehehe. Kali ini ane mau kasi pelajaran bikin tanda tangan diblog sobat. Caranya simple kug. Ikutin yaa tutorialnya :

1. Silahkan masuk dulu di situs ini http://www.mylivesignature.com.
2. Kemudian kalian pilih proceed untuk membuat tanpa harus register
3. Setelah itu silahakan kalian pilih

Using the signature creation wizard> untuk membuat tanda tangan berupa nama
Draw the signature straight on the screen> untuk menggambar tanda tangan sesuai kreasi anda

saya sarankan untuk yang Using the signature creation wizard

4. Kemudian isikan nama sobat dikotak name, dan Next

5.Sudah itu kalian pilih Font sesuka hati kalian

6. Setelahnya pilih font sizenya

7. Pilih background untuk tanda tangan sobat. Saya sarankan untuk memilih background transparent agar cocok untuk segala medan. Heheheh
Setelah itu pilih warna untuk fontnya.

8. Kemudaian tentukan kemiringannya

9. Tanda tangan sobat sudah jadi. Jika ingin menyimpannya, arahkan pointer mouse di gambar tanda tangan sobat kemudian klik kanan save image As, atau bisa juga Copy Image Location

Demikian tutorial membuat tanda tangan. Semoga bermanfaaat.

Cara Membuat Related Post dibawah Postingan

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Saya akan jelaskan sedikit Cara Membuat Related Post dibawah Postingan dari artikel yang telah saya baca milik LHK-BLOG.

Ini Caranya :

1. Login ke dasbor blogger>Template>edit html
2. Centang Expand widget template..
3. Cari kode </head> kemudian paste kode dibawah ini tepat diatas kode </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>

4. Kemudian cari kode <data:post.body/>, jika template sobat ada dua <data:post.body/> maka letakkan kode dibawah ini dibawah kode <data:post.body/> yang kedua.

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Related Post</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();</script>
</b:if>

5. Kemudian simpan template

Huruf Besar Diawal Postingan

Ada yang beda ga pada postingan kali ini. coba tebak apa yang beda hehe. silahkan anda perhatikan dengan seksama. ternyata yang beda adalah huruf awal postingan nya hurufnya gede. benar tidak. jika anda kurang melihatnya segera periksakan mata anda ke dokter. haha bercanda. langsung saja tutorial kali ini adalah membuat huruf besar di awal postingan. langsung saja ikuti langkahnya.

Step-step nya :

Log in ke akun blogger sobat
Selanjutnya Klik Rancangan ➨ Edit HTML. Jangan lupa untuk selalu memback up template anda takut terjadi kesalahan CentangExpand Template Widget ➨ Download Template.
Selanjutnya cari kode ]]></b:skin>
Pastekan kode dibawah ini tepat diatas kode ]]></b:skin> kemudian simpan template anda.

     /* kode untuk huruf awal
     ----------------------------------------------- */
     .awal {
     float:left;
     color: #000000;
     background:#ffffff;
     line-height:80px;
     padding-top:1px;
     padding-right:5px;
     font-family:times;
     font-size:100px;

Untuk penggunaaannya silahkan pada setiap postingan sobat letakkan kode ini <span class="awal">A</span> di awal postingan dalam mode Edit HTML.Ganti tulisan yang berwarna merah dengan huruf awal postingan sobat.

..: Semoga Bermanfaat :..

Sumber : http://yaqindlive.blogspot.com/2012/07/huruf-besar-diawal-postingan.html#ixzz2YMyp4csl

Membuat Efek Petir pada Template blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Sobat mungkin sudah sering melihat blog yang templatenya berhiaskan petir menyambar. Kali ini saya akan berbagi sedikit Cara Membuat Efek Petir pada Template blog. Caranya simple banget kok,,,,
Simak yaa caranya :
1. Login di dasbor blogger sobat>Tata Letak>tambah gadget
2. Kemudian pilih , html/script >
3. Copas kode dibawah ini

Untuk petir yang berwarna putih ini kodenya :

<style

type="text/css">body { background-image:

url(http://4.bp.blogspot.com/-Qjil9RW-Hgo/UTt1yS45L9I/AAAAAAAABUc/i8dfQIdws5o/s1600/petirbodasmencrang.gif);

background-color:transparent; }</style

Untuk petir berwarna kebiru-biruan ini kodenya :

<style

type="text/css">body { background-image:

url(http://3.bp.blogspot.com/-NPWnGkp5G5Q/UTt1zKFzANI/AAAAAAAABUk/GaulmPb4a5s/s1600/stormgilanyambar2.gif);

background-color:transparent; }</style

Membuat Recent post Bergerak kebawah

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Oke sekarang aku mau posting tentang Membuat Recent post Bergerak kebawah. Langsung aja

Silahkan Login ke dasbor blognya dewe-dewe>Tata Letak>tambah gadget
Kemudian copas kode dibawah ini

<center><style type="text/css">#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;} #rp_plus_img ul{list-style-type:none;margin:0;padding:0} #rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;} #rp_plus_img li{height:60px;padding:5px;list-style:none;} #rp_plus_img a{color:#F68629;}#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;} #rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px#F68629;width:95px;height:55px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script> <script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript"> </script> <script type="text/javascript"> var speed = 1000; var pause = 2500; $(document).ready(function(){ rpnewsticker();interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"><script> var numposts = 20; var numchars = 0; </script> <script src="http://sangmancunian.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script> </ul> </center>