Recent post
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Hello sobat,akhirnya saya ada waktu juga untuk merekam proses editing
template dengan kualitas video yang lumayan dan tidak kaku,karena dari
dahulu masih banyak yang penasaran bagaimana saya bisa membuat template
ini itu,nah video ini akan menjadi salah satu project template yang
pernah saya rekam.
di video ini nanti jika kalian menyaksikan sampai selesai,akan menampilkan layar dekstop saya selama kurang lebih 5 jam.yang saya tunjukan didalam video ini adalah proses atau demonstrasi cara saya untuk merombak template shinpuru v2.3 yang belum dishare dan menjadi template sword art online v2 yang sederhana secara santai tapi tepat~.di video ini menunjukan beberapa tutorial yang mungkin sudah ada beberapa yang sudah tau dan mungkin juga ada yang belum tahu dan terjawab selama ini yang selalu anda pertanyakan kepada saya tetapi tidak saya pernah jawab,karena jika hanya dijelaskan teori saya rasa akan kurang paham dan mengerti,jadi semoga video ini cukup membantu untuk yang masih belum mengerti dalam hal dasar pengeditan template secara manual seperti mengganti warna text,background,gambar header,merubah tampilan posting dll.software yang diperlukan hanya browser google chrome.dan colorpicker untuk membantu capture code hex warna.dan yang terpenting dalam hal pengeditan template yaitu pengalaman dan pengetahuan dasar tentang css dan html serta memahami betul struktur template,jangan pernah takut salah atau error dalam pengeditan template,suatu masalah pasti selalu ada jalan untuk memperbaikinya.
di video ini nanti jika kalian menyaksikan sampai selesai,akan menampilkan layar dekstop saya selama kurang lebih 5 jam.yang saya tunjukan didalam video ini adalah proses atau demonstrasi cara saya untuk merombak template shinpuru v2.3 yang belum dishare dan menjadi template sword art online v2 yang sederhana secara santai tapi tepat~.di video ini menunjukan beberapa tutorial yang mungkin sudah ada beberapa yang sudah tau dan mungkin juga ada yang belum tahu dan terjawab selama ini yang selalu anda pertanyakan kepada saya tetapi tidak saya pernah jawab,karena jika hanya dijelaskan teori saya rasa akan kurang paham dan mengerti,jadi semoga video ini cukup membantu untuk yang masih belum mengerti dalam hal dasar pengeditan template secara manual seperti mengganti warna text,background,gambar header,merubah tampilan posting dll.software yang diperlukan hanya browser google chrome.dan colorpicker untuk membantu capture code hex warna.dan yang terpenting dalam hal pengeditan template yaitu pengalaman dan pengetahuan dasar tentang css dan html serta memahami betul struktur template,jangan pernah takut salah atau error dalam pengeditan template,suatu masalah pasti selalu ada jalan untuk memperbaikinya.
oia,selama 5 jam ini juga ada musik" ost
anime,yui,akb48,ikimonogakari,supercell,vocaloid dan masih banyak lagi
agar tidak terlalu bosan menyaksikanya~xD,tapi tetaplah fokus agar anda
mengerti apa yang sedang saya lakukan di dalam video ini.
Berikut template sebeulum di edit dan sesudah diedit :
Before
After
Screenshot video
720 (836mb- 5jam)
Link baru
#untuk file yang dibagi menjadi 5 part dan 24 part JOIN menggunakan Softwarehjsplit
Cara Join hjsplit :
http://flashboyz.wordpress.com/download/cara-gabung-file-dengan-hj-split/
http://www.downloadfilem.com/cara-menggabungkan-file-dengan-hj-split.html
Trik Memasang Avatar penulis blog,Mungkin sobat sering melihat avatar" atau foto penulis blog yang penulis blognya berbeda,dan mempunyai avatar'a masing" yang berbeda seperti template Anime" orang luar negeri yang tiap design'a menggunakan sistem postingan seperti itu.sebenarnya Ini trik lama dan untuk memasang'a sangat simple,tapi trik saya kali ini agak berbeda dengan yang lain ,karena trik yang saya berikan valid HTML dan penempatan CSS'a yang benar.penggunaan css Inline Styles yang salah contoh'a seperti dibawah ini.
<div style="color=#fff;background:#fff;">...</div>
Sebisa mungkin hindari penggunaan inline style seperti diatas. Lebih baik menggunakan stylesheet bawaan blogger,diantara <b:skin> isi css </b:skin>. cara ini akan sangat memudahkan kamu pada saat mengedit CSS'a.
Untuk mencoba trik ini saya sarankan untuk membackup template kamu agar tidak terjadi hal yang tidak diinginkan.sebenarnya cara'a cukup simple dan sudah umum menurut saya.
Fungsi avatar'a itu sendiri menggunakan tag Conditional data:post.author yang memungkinkan untuk menampilkan konten dari author/penulis tersebut
ok langsung saja,pertama buka blogger=>rancangan=>edit HTML,lalu centang Expand Widget Templates.
Setelah saya coba,ternyata tidak semua template sama,oleh karena itu disini ada 2 cara:
tapi saya sarankan coba yang cara2 ,karena tingkat keberhasilan'a lebih tinggi daripada cara1 :)
Cara 1
kemudian Cari kode HTML seperti dibawah ini
<div class='post hentry uncustomized-post-template'>
#Note bila kamu menemukan kode html yang sama seperti diatas,pastikan dibawah kode html itu ada kode:
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
Cara2
Cari kode Html yang mirip" seperti dibawah ini
<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
Setelah itu,copy paste Kode HTML dibawah ini
<div class='admin'>
<b:if cond='data:post.author == "Johanes djogan"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LYPjPZ_h8ZTIwAY0fAQg4ED4j9kYqvMvCRyTafXD8SgZNwfFHqCnjef_-43X97PSR5jk_fp9YO1VYskXJ1hvn5CSPUAXWb_HeYTb9DwpfBZF8qY7vxJKCFiY2NVTLHZ8d74zY3I2Gu8K/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
</div>
Cara1
copy paste kode html diatas tadi tepat dibawah kode:
(<div class='post hentry uncustomized-post-template'> )
Atau
Cara2
copy paste kode html diatas tadi seperti dibawah ini.
<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry'>
<div class='admin'>
<b:if cond='data:post.author == "Johanes djogan"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LYPjPZ_h8ZTIwAY0fAQg4ED4j9kYqvMvCRyTafXD8SgZNwfFHqCnjef_-43X97PSR5jk_fp9YO1VYskXJ1hvn5CSPUAXWb_HeYTb9DwpfBZF8qY7vxJKCFiY2NVTLHZ8d74zY3I2Gu8K/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
</div>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
Setelah itu,copy paste CSS Dibawah ini,diatas kode ]]></b:skin>
.admin {
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-linear-gradient(top, white, #EEE);
background: -moz-linear-gradient(top, white, #EEE);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
margin-left: 10px;
margin-top: 40px;
}
.admin img {width:68px;height:68px}
Pada CSS .Admin,untuk mengatur posisi gunakan margin.
CSS Diatas sama dengan Template saya Another dan Guilty Crown
pada CSS .admin img digunakan untuk mengatur lebar dan tinggi gambar/avatar itu sendiri
CSS Dibawah ini cuma Hiasan background gradient dan border radius CSS3,kamu bisa merubah warna atau sudut bulatnya.
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-linear-gradient(top, white, #EEE);
background: -moz-linear-gradient(top, white, #EEE);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
//Ada kemungkinan sesudah kamu menyimpan'a,posisi'a tidak beraturan,karena itu gunakan margin-left,margin-right,margin-top dan margin-bottom untuk mengatur posisi avatar tersebut.//
lalu simpan dan lihat hasilnya.
Pengaturan Tambahan
Untuk Avatar,sama seperti template Another dan Template Guilty Crown kamu harus setting manual agar avatar mucul,kalau tidak,ya tidak akan muncul==v
Pertama,buka blogger=>rancangan=>edit HTML=> Centang Expand Widget Templates
Lalu carikode html seperti dibawah ini
<b:if cond='data:post.author == "Johanes djogan"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LYPjPZ_h8ZTIwAY0fAQg4ED4j9kYqvMvCRyTafXD8SgZNwfFHqCnjef_-43X97PSR5jk_fp9YO1VYskXJ1hvn5CSPUAXWb_HeYTb9DwpfBZF8qY7vxJKCFiY2NVTLHZ8d74zY3I2Gu8K/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
kode html Diatas ini,saya cuma beri 1 jenis avatar untuk 1 author blog.
cara mengaktifkan avatar ini,yang perlu kamu lakukan adalah mengganti username blogger kamu pada tag conditional author yang sudah tersedia.untuk menambahkan avatar'a,yang kamu perlu lakukan cuma copas HTML diatas,tepat dibawahnya,lalu ganti nama penulis dan url gambar avatar'a.
text bewarna merah:ganti dengan Username kamu.
text bewarna biru :ganti dengan Url gambar avatar kamu.Ukuranya 136px x 190px.
kalau tidak tahu username kamu,sebenar'a mudah aja,tinggal copas dari nama profil di blog kamu,atau bila ada banyak penulis tapi tidak tahu username'a,cara'a:
buka blogger=>setting=>izin/permission.
Contoh:
Lalu kamu akan melihat beberapa nama penulis dan admin disana.tinggal copy paste deh nama'a
//Saya Sudah mencobanya di berbagai template,dan hasilnya ada beberapa yang bisa menggunakan cara 1 dan juga ada yang bisa menggunakan cara2.//
Selesai deh.jadi dengan ini saya harapkan sobat bisa lebih kreatif dalam hal CSS dan HTML,jangan ngikutin style orang lain,apalagi punya orang luar negeri.ciptakan style kita sendiri,kreasi kita sendiri,dan hasil tangan kita sendiri.Ini Style ku,apa style mu?Indonesia harus kreatif.Arigatou Gozaimasu,semoga bermanfaat :)
Apa kabar sobat,kali ini saya mau
sharing tips dan trik cara memasang @font face atau biasa disebut cufon
font seperti template blogger saya Retropop v2
atau blog saya sendiri.mungkin banyak dari kalian yang mungkin agak
kesulitan saat menggunakan font ini.harus uploadlah,inilah itulah,tapi
disini saya akan kasih trik mudah'a menggunakan cufon font.
tapi sebelum trik,saya jelaskan dulu tipsnya.
Tips menggunakan Cufon font
-Saya Sarankan jangan menggunakan cufont lebih dari 2 jenis font.
-Terapkan cufon font HANYA pada Header text.misal judul blog,judul posting,judul sidebar,dan Readmore.
-Jangan terapkan cufon font pada seluruh halaman blog.
-Sebaiknya upload font pada hosting local / hosting yang koneksinya cepat dan lancar seperti https://sites.google.com/
ini kumpulan JS milik saya
https://sites.google.com/site/djogzs/js
keunggulan menggunakan cufon font yaitu:
-Text lebih jelas
-Tipografi sangat sempurna
-Text'a tidak dapat di copy paste seperti text biasa karena menggunakan elemen HTML <canvas> .
-Tipe/style font bisa kamu dapatkan darimana saja.
-Hampir Mendukung semua browser
-Mudah digunakan/diterapkan sama seperti google font.
Kekurangan menggunakan Cufon font yaitu:
-Koneksi internet harus cukup cepat.
-Agak berat saat pertama kali loading/rendering font.
Kalau udah mengerti,langsung saja saya kasih triknya nih :)
Triknya yaitu,sobat tidak perlu mengunjungi http://cufon.shoqolate.com/generate/ yang cara'a agak rumit karena banyak pengaturanya,harus cari" font'a dululah,upload,convert font TTF,OTF menjadi cufonfont dan sebagainya.
kamu cukup mengunjungi web yang sudah menyediakan file cufon font untuk langsung digunakan.
web yang saya rekomendasikan: http://www.cufonfonts.com
Setelah itu,kamu akan melihat diweb itu sudah tersedia macam" variasi font yang menarik seperti pada contoh diatas,kamu pilih salah satu lalu klik "CUFON FILE DOWNLOAD"
lalu,kamu akan melihat tipe font dan Character Set font'a.gunakan saja sesuai keperluan.setelah itu scroll ke halaman yang paling bawah
misalkan saya memlih tipe font Titillium
Klik "FONT DOWNLOAD AS CUFON"
Setelah itu simpan file cufonnya ke dekstop.
Selanjutnya kamu upload fontnya.(misal di https://sites.google.com/)
Setelah itu Copas semua Javascript'a seperti gambar diatas.
lalu,sobat login ke blogger - Rancangan - Edit HTML.
paste semua script tadi di bawah code ]]></b:skin>
Setelah itu jangan disimpan dahulu ya ==v
pertama,kamu perhatikan script yang seperti dibawah ini:
<script src="http://cufon.shoqolate.com/js/cufon-yui.js" type="text/javascript"></script>
<script src="titillium-text.cufonfonts.js" type="text/javascript"></script>
http://cufon.shoqolate.com/js/cufon-yui.js
alamat link diatas diganti dengan milik saya,karena sudah diupload ke sites.google
https://sites.google.com/site/djogzs/js/cufon-yui.js
Js diatas ini sangat penting agar cufont font dapat diterapkan
titillium-text.cufonfonts.js
Diganti dengan Url cufon yang tadi kamu upload
Kemudian,perhatikan js dibawah ini:
<script type="text/javascript">
Cufon.replace('.titilliumtext22l_thin', { fontFamily: 'TitilliumText22L-Thin', hover: true });
Cufon.replace('.titilliumtext22l_light', { fontFamily: 'TitilliumText22L-Light', hover: true });
Cufon.replace('.titilliumtext22l_regular', { fontFamily: 'TitilliumText22L-Regular', hover: true });
Cufon.replace('.titilliumtext22l_medium', { fontFamily: 'TitilliumText22L-Medium', hover: true });
Cufon.replace('.titilliumtext22l_bold', { fontFamily: 'TitilliumText22L-Bold', hover: true });
Cufon.replace('.titilliumtext22l_xbold', { fontFamily: 'TitilliumText22L-XBold', hover: true });
</script>
Disini menurut saya kita gunakan tipe font yang normal saja,jadi yang lain kita hapus saja menjadi seperti ini:
<script type="text/javascript">
Cufon.replace('.titilliumtext22l_regular', { fontFamily: 'TitilliumText22L-Regular', hover: true })
</script>
(Tiap font berbeda",ada yang tipe'a cuma 1 ada juga yang banyak (bold,light,thin,dan sebagai'a)
Setelah itu,perhatikan text diatas yang saya beri warna merah.
.titilliumtext22l_regular diganti dengan Css yang akan kamu ganti font'a.
Misalkan kita mau menggantinya untuk judul blog yg css'a #Header1 (tiap blog css'a bisa berbeda)
kita ganti menjadi seperti ini:
<script type="text/javascript">
Cufon.replace('#Header1', { fontFamily: 'TitilliumText22L-Regular', hover: true });
</script>
Setelah itu sobat simpan.
atau yang ga mau ribet,coba tes script ini dari tutorial diatas.
<script src="https://sites.google.com/site/djogzs/js/cufon-yui.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/djogzs/js/titillium-text.cufonfonts.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#Header1', { fontFamily: 'TitilliumText22L-Regular', hover: true });
</script>
Setelah itu simpan dan lihat hasilnya.
Bila berhasil,kita masuk ketahap tambahan~xDD
tadi sudah berhasil mengganti judul blog.lalu bagaimana cara menerapkan font'a ke text lainya?mudah saja,copy paste script css dibawahnya.
misal:
<script type="text/javascript">
Cufon.replace('#Header1', { fontFamily: 'TitilliumText22L-Regular', hover: true });
Cufon.replace('#HTML1 h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });
Cufon.replace('#Profile1 h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });
Cufon.replace('#post-header h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });
Cufon.replace('#sidebar h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });
dan seterusnya.....
</script>
CONTOH CUFON DARI TUTORIAL DIATAS
SUCCESS :)
Selesai deh,simple bukan? ga terlalu ribet" banget.saya udah jelasin sedetail mungkin tuh~xDD
sebelum dan sesudah,maaf kalau da kata" yang kurang jelas atau emang gajelas ==v #Plakk
selamat mencoba,happy coding and semoga bermanfaat.Arigatou Gozaimasu~
Hai minna-san,hari ini saya mau sharing tentang Content Slider CSS3 yang sama dengan di template Fansuber Otaku,karena ternyata banyak yang membutuhkan slider ini.
Oia,Slider ini Sebenarnya hasil Editan saya,aslinya kamu bisa lihat di web ini :Iamceege.com. Apa sih bedanya? yang berbeda yang pasti stylenya,teruama pada judul slide,kecepatan animasi,jumlah photo yang ditampilkan,dan penambahan deskripsi pada slider,serta penambahan efek filter blur pada animasi.dan sebenarnya juga untuk pemasangan slider ini sudah pernah saya post pada banner lider,kalau yang itu cuma dibuat khusus agar cocok dengan banner.kelebihan dari slider ini yaitu ringan,tidak memerlukan javascript ataupun jquery,animasi dapat kita atur sendiri,dan cssnya mudah untuk disetting.
CSS
Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>
#slider3 {
width: 610px;
height: 298px;
overflow: hidden;
background-color: #fafafa;
border: 1px solid #ddd;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
margin:auto;
margin-bottom: 30px;
}
#slider3:hover #pause1 {
opacity:1;
}
#slider3:hover ul, #slider3:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#slider3 img {-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;}
#slider3 img:hover {filter: saturate(1.2);
-webkit-filter: saturate(1.2);
-moz-filter: saturate(1.2);
-o-filter: saturate(1.2);
-ms-filter: saturate(1.2);}
#pause1 {
width: 610px;
height: 255px;
position: absolute;
top: 45px;
opacity: 0;
pointer-events: none;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGHHCZ-tNuh6ZeMIchyAJWNoQDxAyu2onBHkUofrWv6QJHvzkA06nKvjrVax_tAARJqvDjdezd88-uJL671JVDMeI1jqI_LtzAjixweMD7vxg70Ej4suVgr9WlYMqzeYJhT5zEE-YQE6zh/s1600/paused+copy.png") no-repeat;
left: 560px;
}
#overlay1 {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade1 35s infinite;
-webkit-animation:overlay-fade1 35s infinite;
}
#slider3 ul {
width:2630px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation1 35s infinite;
-webkit-animation:slide-animation1 35s infinite;
position:relative;
left:0px;
}
#slider3 li {
display:inline;
width:610px;
height:235px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider3 li:last-of-type {
background-color:#362c30;
}
#slider3 li a {
display:block;
text-decoration:none;
}
#slider3 li span:hover {background: #7776B2;}
#slider3 li span {
display: block;
width: 553px;
padding: 5px 20px;
border-bottom: 1px solid #362c30;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
background: #8CA5CE;
border-left: 8px ridge #7776B2;
border-right: 8px ridge #7776B2;
float: left;
-webkit-box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
-moz-box-shadow: inset 0 1px 20px rgba(0,0,0,0.3), 0 1px 0 #5e524f;
box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
}
#slider3 li .baka {
display: block;
width: 570px;
padding: 5px 20px;
pointer-events: none;
text-align: left;
background: #fafafa;
float: left;
border-top: 1px solid #ddd;
height: 51px;
margin-top: -3px;
}
/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes slide-animation1 {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
22.5% {opacity:0.6;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
25% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
45% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
47.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
50% {left:-1220px;opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
70% {left:-1220px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
72.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
75% {left:-1830px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
95% {opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
98% {left:-1830px; opacity:0;filter: blur(3px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
100% {left:0px; opacity:0;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
}
@-moz-keyframes slide-animation1 {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
22.5% {opacity:0.6;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
25% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
45% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
47.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
50% {left:-1220px;opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
70% {left:-1220px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
72.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
75% {left:-1830px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
95% {opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
98% {left:-1830px; opacity:0;filter: blur(3px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
100% {left:0px; opacity:0;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
}
@-webkit-keyframes overlay-fade1 {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}/* Blog johanes djogzs.blogspot.com */
@-moz-keyframes overlay-fade1 {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider3 ul li span h2 {
font-size:13px;
line-height:24px;
color:#fff;
font-weight:normal;
text-shadow:1px 1px 1px #362c30;
text-transform:uppercase;
}/* Blog johanes djogzs.blogspot.com */
#slider3 ul li .baka h3 {
font-size:13px;
line-height:25px;
color:#222;
font-weight:normal;
}/* Blog johanes djogzs.blogspot.com */
HTML
Sedangkan untuk Kode Html ini diletakan diantara kode <body> ... </body> tergantung dimana anda ingin meletakanya dimana.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slider3'>
<div id='mask1'>
<ul><li>
<span><h2>Tamako Market</h2></span>
<a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOVp0mQOwfDIaBJGaVvtqTeF_9qGnpsOkMyxBP09NuSdZn66oUzQjD_-FPyGR8AF9jeSamCwvZk-rdBDoOxCCiGD6U6OBdEngKnmWbdnSc-J8EEUskwxrt733arsq3hWI0KUzBasGMVjn/s1600/4.jpg'/></a>
<div class='baka'><h3>Tamako Kitashirakawa is the eldest daughter of a family which runs a mochi shop in her town's bustling Tama-ya shopping district.</h3></div>
</li>
<li>
<span><h2>Vividred Operation</h2></span>
<a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyqItjTJkthyjcXgeCtjURk9uPj2yPX3CBx_D9ueVeI3-2unZbPGi4f_hrb8p65ks3rz5-Hq0PgATENFCP6AToHh4HsMTtwt3ofzftfjhPxqES7ZphSJW4jACTHIM-kh-H6WNFnGPTm2hf/s1600/3.jpg'/></a>
<div class='baka'><h3>The story is set in a futuristic and peaceful world made possible thanks to the invention of the Manifestation Engine (示現エンジン Jigen Enjin?), which solved an energy crisis five years prior.</h3></div>
</li>
<li>
<span><h2>Ore no Kanojo to Osananajimi ga Shuraba Sugiru</h2></span>
<a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9YAbNILuAxKLmieRgpFbscmwXe80qwDdSXDMstwTDW_0HEAijQI1y9roGZvdAPfxi2wzQTDsznp5Bms_qPSyqXYOeTHN47dYvI1h4RXa_U77cQTTJJcpSm4h2qL-qPMCygCgQhxsV1byO/s1600/Untitled-1.jpg'/></a>
<div class='baka'><h3>Eita Kidō enters high school with the aim to attend medical school. Due to his parents getting divorced and his intention to maintain his grades, he shuns anything to do with romance or love.</h3></div>
</li>
<li>
<span><h2>Maoyuu Maou Yuusha</h2></span><a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2DlRdiqVzXh3s9m3etvz6c04cyNZQczLa4gLEicuG6-7L2S4zdzB1r7_-IcEbJES-cVcbLHfU3GR4GmuM_riJ1bTQCCGS6Q5IHE4KuMTyRcGFSpKp_mKD5VgziKEIt5Qzpl0axJ4gVN0/s1600/2.jpg'/></a>
<div class='baka'><h3>The story is set in a world embroiled by war between Humans and Demons. The Humans' greatest hero invades the Demon King's castle determined to vanquish her. However, instead of fighting back, the King proposes an alliance with the Hero.</h3></div>
</li>
</ul>
</div>
<div id='overlay1'>
</div><div id='pause1'>
</div></div></b:if>
Text bewarna Orange : Judul Slider
Text bewarna merah : Alamat situs/Link/url web
Text bewarna ungu : Url Gambar
Text bewarna biru : Deskripsi
Setting CSS Judul slider.
#slider3 li span {
display: block;
width: 553px;
padding: 5px 20px;
border-bottom: 1px solid #362c30;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
background: #8CA5CE; (warna background dapat diganti.)
border-left: 8px ridge #7776B2;
border-right: 8px ridge #7776B2;
float: left;
-webkit-box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
-moz-box-shadow: inset 0 1px 20px rgba(0,0,0,0.3), 0 1px 0 #5e524f;
box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
}
Setting CSS deskripsi Slider
#slider3 li .baka {
display: block;
width: 570px;
padding: 5px 20px;
pointer-events: none;
text-align: left;
background: #fafafa; (warna background dapat diganti)
float: left;
border-top: 1px solid #ddd;
height: 51px;
margin-top: -3px;
}
Oia,aya mau menambahkan lagi,apabila kamu ingin mengubah ukuran lider ini,kamu haru setting sendiri secara manual.
Slider ini sudah saya atur dengan ukuran standart 610px,jadi artinya seluruh content pada slider ini selebar 610px,termasuk pergerakan animasi dan ukuran gambar pada slider ini sendiri,jadi bila anda ingin mengganti ukuran slider ini,misalkan 650px,berarti seluruh css lebarnya juga harus 650px agar susunanya rapih dan efek animasinya juga tepat,terumama untuk css animasi keyframenya,
saya ambil contoh dari postingan banner slider,karena sebelunya sudah dijelaskan.
(contoh pada css banner slider)
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
perhatikan saat 25% dan 45%, left:-468px; .jadi saat css slider sudah difungsikan untuk bergeser ke arah kiri sejauh 468px.
1. maka karena itu jika ukuran gambar tidak tepat/sama,yang terjadi pergerakan slider menjadi tidak sempurna.
2.bila kamu perhatikan,kenapa di timing 47.5% menggunakan opacity?itu hanya perfungsi sebagai fade effect/transparant sesaat akan bergeser.
3.di timing 50% 70% bernilai -936px dan 75% 98% -1404px. kenapa bisa begitu?
itu artinya slide akan selalu bergeser ke arah kiri sejauh -468px.dan selanjutnya juga pindah ke slide selanjutnya,maka akan bergeser lagi sejauh -468px.
begini perhitungan dan teorinya:
-ketika suatu objek digeser kearah kiri,maka akan bernilai minus,maka
0-468 = -468
digeser ke arah kiri lagi menjadi
-468-468 = -936
digeser ke arah kiri lagi menjadi
-936-468 = -1404
lalu di timing 100% kembali ke posisi awal yaitu 0.
nah,jadi bagaimana kalau mau menambahkan slider lagi? kalian harus membuat perhitungan sendiri mulai dari timing 0% sampai 100%.
jadi semoga saja bisa dipahami dari penjelasan saya diatas,pastinya ada hubunganya dengan perhitungan matematika xD
karena jika anda mengerti dengan fungsi diatas,kamu bisa mengatur slide ini sendiri dengan ukuran bebas.
perhitungan diatassama saja dengan content slider ini,hanya saja nilainya berbeda karena ukuranya lebih lebar content slider ini.
Hello sobat,pada kesempatan kali ini,saya akan berbagi trik cara memasang Efek loading page dengan CSS3 Animasi hasil modifikasi saya sendiri full menggunakan CSS3 dan dan css3 keyframe animation dengan menggunakan timing yang tepat~xD
ScreenShot:
Awal mula membuat trik ini saya mendapat ide dari banner slider/photo slider yang dulu saya post.jadi saya punya ide untuk menggunakan efek loadingnya saja dan dibuat melayang pada blog kita pada tiap halamanya,ya sudah,saya hapus gambar slidenya,dan dibuat lebih simple dan menyisakan css loadernya saja.efek loadernya sendiri saya atur timing standart'a selama 15 detik dan efek fade-out/efek menghilangkan slider setelah waktu habis,dan jadilah PAGE LOADER palsu~xD. LOL
Mengapa saya sebut palsu?
karena menggunakan trik ini bukan benar" loading konten yang ada di blog kita,tetapi hanya membuat pengunjung bertahan selama kurang lebih dari 15 detik~xDD.
Oia,sebelumnya saya ingatkan,untuk memasang loader page ini,lebih baik diterapkan pada blog yang beban-nya belum terlalu berat,karena menggunakan trik ini akan menambah sedikit beban pada blog anda,dan itu juga tergantung pada konten" pada blog anda,dan jangan lupa untuk selalu membackup template anda agar tidak terjadi sesuatu yang tidak diinginkan~
mau dicoba? ikuti langkah' dibawah ini :
CSS
Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>
#sliderloadingwrapper {width:100%;height:100%;
position:fixed;z-index: 999999999999999999999999999999;
background: rgba(95, 130, 187, 0.2);top: 0px;
left: 0px;-webkit-animation: fadeOut 15s linear forwards;
-moz-animation: fadeOut 15s linear forwards;
-o-animation: fadeOut 15s linear forwards;
-ms-animation: fadeOut 15s linear forwards;
animation: fadeOut 15s linear forwards;}
/* Blog johanes djogzs.blogspot.com */
#sliderloader {
width: 500px;
height: 85px;
overflow: hidden;
background-color: #8CA5CE;
border: 1px solid #5F82BB;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
margin-bottom: 30px;
border-radius: 5px;
box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.2), 0 0px 0 #5E524F;
border-bottom: 1px solid #222;
margin: auto;
margin-top: 200px;}
#progressbg {
width:460px;
margin:auto;
height:5px;
background-color:#ddd;
top:65px;
position:relative;
}/* Blog johanes djogzs.blogspot.com */
#johanesloader {
width:1px;
height:5px;
background-color:#ffd000;
-moz-animation:johanesloader 70s infinite;
-webkit-animation:johanesloader 70s infinite;
position:relative;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader ul {
width:2630px;
list-style:none;
padding:0;
margin:0;
position:relative;
left:0px;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader li {
display:inline;
width:500px;
height:100px;
margin:0;
padding:0;
float:left;
position:relative;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader li a {
display:block;
text-decoration:none;}
#sliderloader li span {
display: block;
width: 460px;
padding: 10px 20px;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
float: left;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader ul li span h2 {
font-size:13px;
line-height:24px;
color:#fff;letter-spacing: 1px;
font-weight:normal;
text-shadow:1px 1px 2px #362c30;
text-transform:uppercase;
}/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes johanesloader {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:460px; opacity:1;}
22.5% {width:460px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:460px; opacity:1;}
47.5% {width:460px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:460px; opacity:1;}
72.5% {width:460px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:460px; opacity:1;}
98% {width:460px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes johanesloader {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:460px; opacity:1;}
22.5% {width:460px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:460px; opacity:1;}
47.5% {width:460px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:460px; opacity:1;}
72.5% {width:460px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:460px; opacity:1;}
98% {width:460px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes fadeOut {
0% { opacity: 1;top:0px;}
10% { opacity: 1;top:0px; }
90% { opacity: 1; -webkit-transform: translateY(0px);top:0px;}
99% { opacity: 0; -webkit-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}
@-moz-keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; -moz-transform: translateY(0px);top:0px;}
99% { opacity: 0; -moz-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}
@-o-keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; -o-transform: translateY(0px);top:0px;}
99% { opacity: 0; -o-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}
@-ms-keyframes fadeOut {
0% { opacity: 1;top:0px;}
10% { opacity: 1;top:0px;}
90% { opacity: 1; -ms-transform: translateY(0px);top:0px;}
99% { opacity: 0; -ms-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}
@keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; transform: translateY(0px);top:0px;}
99% { opacity: 0; transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px; }
}
HTML
Sedangkan untuk Kode Html ini diletakan dibawah kode <body>
<div id='sliderloadingwrapper'><div id='sliderloader'>
<ul><li><span><h2>Loading Page . . .</h2></span></li></ul>
<div id='progressbg'><div id='johanesloader'>
</div></div></div></div>
Oia,jika kamu ingin mengganti warna background dan loadernya,kamu tinggal mencari css dibawah ini,dan mengganti kode warnanya (hex dan rgba)
#sliderloadingwrapper{
yang diganti :
background: rgba(95, 130, 187, 0.2);
dan
#sliderloader {
yang diganti :
background-color: #8CA5CE;
Menggunakan trik ini,akan berpengaruh pada seluruh postingan blog anda,jika hanya ingin tampil di halaman depan/homepage saja,gunakan html tag conditional yang diletakan di luar html loader ini.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Isi HTML
</b:if>
untuk lebih lengkapnya,bisa dibaca disini
#Trik ini sudah teruji pada browser Google Chrome dan mozilla Firefox versi terbaru.
Selamat mencoba,semoga bermanfaat,Arigatou gozaimasu minna-san~ xD
Pagi * Semua Teman-teman Dan para pengunjung setia blog inisial. FUNDS kesempatan Kali SAYA Akan memberikan Cara untuk cek daftar harga jual blog kita
Buat Yang Penasaran FUNDS buat Tahu daftar harga jual Blognya berapa, Langsung Saja mengikuti langkah-langkah dibawah inisial untuk mengetahuinya:
Buat Yang Penasaran FUNDS buat Tahu daftar harga jual Blognya berapa, Langsung Saja mengikuti langkah-langkah dibawah inisial untuk mengetahuinya:
1. Kunjungi Situs Ini
2. Masukan url blog KAMU seperti Biasa lalu mensubmit di situs-SITUS Lain Dan Hitung.
3. Selanjutnya Kalian Akan di bawa Ke Auditan Spesifikasi Dan INFORMASI daftar harga jual blog sobat seperti gambar di Bawah
Dan selamat sekarang ANDA telah mengetahuinya.
Imformasi di SITUS inisial memberikan HASIL daftar harga memakai Dolar, Dan alhamdulilah blog Suami Jatuh FUNDS daftar harga $ 3,503 USD seperti Yang ANDA lihat FUNDS screeshot di Atas Tadi. Wuih kalo di rupiahin berapa tuh.
Cara inisial JUGA Bisa di lakukan Bukan Cuma untuk blog Saja. Oke mudahkan Semoga hasilnya memuaskan Dan daftar harga semakin Naik Terus. Semoga bermanfaat sekian Dan terima Kasih.
saya akan berbagi tutorial dan tips trik cara mudah membuat like fanspage facebook melayang di blog, oke kita berlanjut ketutorialnya jika anda ingin memasang like facebook melayang di blog begini nih caranya, atau lihat saja pada like facebook yang melayang
oke kita lanjut saja ke cara pembuatannya, cara pembuatannya pun sebenarnya super simpel karena anda tidak usah menambahkan atau mengurang kode-kode yang ada pada template sobat masing-masing karena caranya pun tergolong mudah dan jika gagalpun akan sangat mudah untuk menghapusnya, untuk langkah-langkahnya silahkan simak berikut ini:
1.Masuk pada account blog sobat > Pilih yang bagian Tata Letak (silahkan cari tata letak) atau perhatikan gambar dibawah ini: klik nomer 1, lalu tambahkan gadget nomer 2, lalu klik HTML/JavaScript nomer 3.
2.Kedua silahkan perhatikan lagi gambar dibawah ini karena ini lanjutan dari point 1, lihat pada judul silahkan kosongkan saja kemudian lihat pada tulisan "silahkan pasteukan disini" nah disanalah nantinya kode like fanspage facebook anda simpan.
3.Dan silahkan copy paste atau copas kodenya dibawah ini dengan catatan anda baca yang point empatnya dibawah sebelum anda pasangkan.
<!-- Copy Codenya Dari Sini --!>
<!-- Copy Kode Berakhir Sampai Sini --!>
4.Untuk tambahan keterangan yang berwarna merah silahkan ganti dengan warna favorit anda begitu juga dengan yang dikasih tanda warna birunya ganti dengan warna favorit anda, jika anda bingung silahkan ganti warna url fanspage facebook milik saya dengan milik anda yang saya kasih warna pink diatas. atau seperti ini URL'NYA: http://www.facebook.com/SuryaDheCheaterz nah seperti itu kira-kiranya dan ganti dengan milik anda, jika anda belum tahu cara membuat URL FansPage Facebooknya silahkan baca artikel ini: 3 cara membuat fanspage facebook dengan mudah ,nah begitulah kira-kira cara membuatnya.
Oke itulah tips kali ini tentang Cara Memasang FansPage Facebook Melayang di blog ,semoga apa yang sudah saya sampaikan bisa bermanfaat buat rekan-rekan semuanya. atas kunjungannya saya ucapkan terima kasih.
oke kita lanjut saja ke cara pembuatannya, cara pembuatannya pun sebenarnya super simpel karena anda tidak usah menambahkan atau mengurang kode-kode yang ada pada template sobat masing-masing karena caranya pun tergolong mudah dan jika gagalpun akan sangat mudah untuk menghapusnya, untuk langkah-langkahnya silahkan simak berikut ini:
1.Masuk pada account blog sobat > Pilih yang bagian Tata Letak (silahkan cari tata letak) atau perhatikan gambar dibawah ini: klik nomer 1, lalu tambahkan gadget nomer 2, lalu klik HTML/JavaScript nomer 3.
2.Kedua silahkan perhatikan lagi gambar dibawah ini karena ini lanjutan dari point 1, lihat pada judul silahkan kosongkan saja kemudian lihat pada tulisan "silahkan pasteukan disini" nah disanalah nantinya kode like fanspage facebook anda simpan.
3.Dan silahkan copy paste atau copas kodenya dibawah ini dengan catatan anda baca yang point empatnya dibawah sebelum anda pasangkan.
<!-- Copy Codenya Dari Sini --!>
<style type="text/css">
#topbar{
position:absolute;
padding-left:-100px;
background-color: #FF0000;
width: 300px;
visibility: hidden;
z-index: 200;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 25 //set x offset of bar in pixels
var startY = 25 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-uakvhBWnxuuOlXdCVULjcyevj9vdnq87OWibzd95h3kZeE65BPHt8BHRuPoKok-qpMJwPbAchY5dL-yFiAQlkPn2ugk5Jn2HISsq0xGPQXXCPf0IUmBlNOeB4bZpy4Gu4S6ruSrmDGPf/s1600/close3.png" /></a></div>
<center>
<div style="background: #FF0000;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/SuryaDheCheaterz &width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#80C8FE;"></iframe><span><a href="http://tyrexcom.blogspot.com"onmouseover="window.location=this.href"><b>GetWidget</b></a></span></div></center></div>
#topbar{
position:absolute;
padding-left:-100px;
background-color: #FF0000;
width: 300px;
visibility: hidden;
z-index: 200;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 25 //set x offset of bar in pixels
var startY = 25 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-uakvhBWnxuuOlXdCVULjcyevj9vdnq87OWibzd95h3kZeE65BPHt8BHRuPoKok-qpMJwPbAchY5dL-yFiAQlkPn2ugk5Jn2HISsq0xGPQXXCPf0IUmBlNOeB4bZpy4Gu4S6ruSrmDGPf/s1600/close3.png" /></a></div>
<center>
<div style="background: #FF0000;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/SuryaDheCheaterz &width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#80C8FE;"></iframe><span><a href="http://tyrexcom.blogspot.com"onmouseover="window.location=this.href"><b>GetWidget</b></a></span></div></center></div>
<!-- Copy Kode Berakhir Sampai Sini --!>
4.Untuk tambahan keterangan yang berwarna merah silahkan ganti dengan warna favorit anda begitu juga dengan yang dikasih tanda warna birunya ganti dengan warna favorit anda, jika anda bingung silahkan ganti warna url fanspage facebook milik saya dengan milik anda yang saya kasih warna pink diatas. atau seperti ini URL'NYA: http://www.facebook.com/SuryaDheCheaterz nah seperti itu kira-kiranya dan ganti dengan milik anda, jika anda belum tahu cara membuat URL FansPage Facebooknya silahkan baca artikel ini: 3 cara membuat fanspage facebook dengan mudah ,nah begitulah kira-kira cara membuatnya.
Oke itulah tips kali ini tentang Cara Memasang FansPage Facebook Melayang di blog ,semoga apa yang sudah saya sampaikan bisa bermanfaat buat rekan-rekan semuanya. atas kunjungannya saya ucapkan terima kasih.
MENGETAHUI BERAT/
KECEPATAN BLOG/WEBSITE - Terkadang seorang blogger mengutamakan
tampilan blognya untuk terlihat lebih menarik oleh pandangan pengunjung
sehingga selalu menambahkan beberapa widget, banner dan berbagai aksesoris
lainnya tanpa menyadari jikalau blognya telah berat/ loding lama, bagi
blogger yang bekerja dengan menggunakan speed internet yang sangat
cepat, ini memang tidak terasa berat baginya dan hanya dirasakan oleh
pengunjung yang mempunyai speed internet yang lemah.
Pengunjung
menggunakan speed internet berbeda-beda, dengan itulah seorang blogger
harus memperhatikan kecepatan akses blognya sehingga pengunjung akan
merasa senang mendatanginya jika kecepatan akses blognya tidak lama. Secara
umum pengunjung mengunjungi sebuah blog dengan tujuan informasi yang
ada di dalam blog tersebut, soal tampilan adalah urusan belakangan.
Betapa menyebalkan perasaan seorang pengunjung jika mengakses blog kita
dengan dengan waktu loding yang lama.
Untuk mengetahui berat/ kecepatan akses sebuah blog/website
dapat dilakukan dengan menggunakan berbagai tool yang cukup ampuh dalam
hal ini selain menggunakan perasaan dalam mengakses blog kita sendiri.
Berikut ini beberapa tool online servis yang dapat mengukur berat dan kecepatan akses blog kita!
1. Website Test Speed - Caranya, hanya memasukkan link/url blog kemudian klik button Check, lalu tunggu hingga menampilkan informasi tentang blog tersebut.
2. Pingdom Tools - Caranya juga sama tinggal masukkan link/url blog kemudian klik button Test Now setelah itu secara otomatis akan muncul beberapa informasi tentang blog tersebut.
3. StopWatch - Caranya dengan memasukkan link/ url blog kemudian klik button Start StopWatch lalu secara otomatis akan membuka blog dengan informasi waktu di bagian atas.
4. Web Page Analyzer - Caranya juga hampir sama tinggal masukkan url/link blog atau bisa dengan kode xml/ kode template blog setelah itu klik Kirim lalu kita diminta untuk menverifikasi kata/karakter, ketik karakter yang muncul pada gambar kemudian klik Continue lalu tunggu hingga akan menampilkan informasi tentang blog yang di input.
Setelah
mengetahui beratnya blog kita maka akan dengan mudah untuk membuatnya
ringan dengan mengedit atau menghilangkan sebagian widget, banner dan
yang lainnya yang membuatnya berat.
Oke demikian postingan kali ini, semoga bermanfaat dan sampai jumpa di postingan selanjutnya...!!!
Hai sobat blogger, jumpa lagi di kesempatan ini, kali ini saya akan berbagi dengan sobat tentang sebuah aksesoris blog yang cukup menarik dan sangat populer saat ini. Aksesoris yang dimaksud adalah Energi Saving Mode atau biasa disebut Screensaver dari sebuah aplikasi sederhana yaitu aplikasi Onlineleaf.
Energi Saving Mode/ Screensaver
berfungsi membuat halaman blog menjadi standby atau seluruh proses akan
dihentikan sehingga dapat menghemat energi laptop/PC saat blog dalam
keadaan diam dan Energi Saving Mode akan menghentikan fungsinya saat
mouse digerakkan lalu tampil halaman blog kembali.
Jika berminat
untuk memasang di blog sobat, caranya sangat mudah hanya memberi sedikit
kode di blog sobat kemudian akan menikmati kelebihan dari fungsi
aplikasi ini. Jaka masih belum mengerti cara pasangnya, berikut akan di
bahasa secara rinci.
2. Klik Template lalu pilih Edit HTML
3. Klik Lanjutkan kemudian cari kode </head> (agar menemukan dengan mudah klik CTRL + F kemudian ketikan </head>).
4. Jika sudah ketemu pastekan kode dibawah ini pas di atas kode </head> yang telah ditemukan tadi
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>
5. Setelah selesai Klik Simpan Template
6. Lihat blog anda dalam beberapa detik jika berhasil maka akan muncul seperti di bawah ini
Selamat mencoba, untuk cara mengedit dan mempercantik tampilan Screensavernya akan di bahas pada postingan berikutnya. Postingan cukup sampai disini, semoga bermanfaat dan jangan lupa nantikan aksesoris yang lebih menarik lagi pada kesempatan selanjutnya.
Mendapatkan page rank blog adalah impian semua blogger termasuk saya, kenapa tidak? karena mendapatkan PR berarti beberapa artikel yang ada dalam blog anda berada di barisan teratas mesin pencari google,
dengan begitu secara otomatis akan bertambah pengunjung dari
sebelumnya. Alasannya bisa anda pikirkan sendiri berdasarkan logika.
1. Daftarkan situs anda ke google addurl
2. Sign-Up di google Analytucs untuk memonitor statistik situs anda, biasanya robot google akan mendeteksi situs anda dalam waktu 1 - 2 hari.
3. Gunakan Google Sitemap plugin untuk Wordpress, ini berfungsi untuk memberitahukan Google halaman situs anda.
4. Daftarkan situs ke Google Webmaster.
5. Update situs anda sesering mungkin, kalau perlu secara teratur dan yang pati original konten.
6. Mencari situs anda sendiri melalui google menggunakan kata kunci yang telah kita terapkan hingga ketemu, dan alangkah baiknya kalau melakukan cara ini sesering mungkin.
7. Daftarkan situs anda ke digg.com ini gunanya untuk memperkuat keyword yang anda bidik untuk mendapatkan backlink.
Untuk mendapatkan Page Rank bisa dikatakan sulit dan bisa juga dikatakan sangat mudah, mengikuti kinerja para master dalam usaha Mendapatkan Page Rank,
ada beberapa cara yang mereka lakukan sehingga terkadang dalam beberapa
minggu mereka telah mendapatkan Page Rank dan itu bisa dikatakan sangat
cepat dibandingkan dengan yang terjadi secara umum.
Dalam postingan ini akan dibahas tentang beberapa tips untuk mendapatkan Page Rank dengan cepat. Berikut tips-tips yang dapat anda lakukan untuk mendapatkan pagerank dengan cepat.
1. Daftarkan situs anda ke google addurl
2. Sign-Up di google Analytucs untuk memonitor statistik situs anda, biasanya robot google akan mendeteksi situs anda dalam waktu 1 - 2 hari.
3. Gunakan Google Sitemap plugin untuk Wordpress, ini berfungsi untuk memberitahukan Google halaman situs anda.
4. Daftarkan situs ke Google Webmaster.
5. Update situs anda sesering mungkin, kalau perlu secara teratur dan yang pati original konten.
6. Mencari situs anda sendiri melalui google menggunakan kata kunci yang telah kita terapkan hingga ketemu, dan alangkah baiknya kalau melakukan cara ini sesering mungkin.
7. Daftarkan situs anda ke digg.com ini gunanya untuk memperkuat keyword yang anda bidik untuk mendapatkan backlink.
Itulah beberapa
cara yang dapat anda lakukan dalam upaya mempercepat page rank di situs
anda, sebenarnya masih banyak cara namun akan dibahas pada kesempatan
berikutnya.
Dunia blogger
saat ini semakin berkembang, dengan perkembangannya yang sangat pesat
hadir pulalah beberapa blogger yang tidak saling menghargai, dengan
seenaknya mencopy artikel dari blog orang lain. Dan anehnya tidak ada
sangsi yang jelas untuk perbuatan orang yang tak bertanggung jawab ini,
sehingga sebagian blogger yang berusaha keras membuat artikel merasa
tidak bersemangat lagi, alasanya "mengapa harus repot buat artikel yang
menarik kalau itu akan diambil oleh orang lain?".
Dalam postingan kali ini, saya akan membahas tentang cara mempatenkan Artikel yang ada dalam blog anda sehingga mendapatkan hak cipta. Agar mengurangi keraguan anda dalam menyajikan artikel yang menarik untuk orang lain. Ikuti langkah-langkah berikut:
Cara Patenkan Artikel Pada Blog
1. Kunjungi Situs Tynt
2. Klik Publisher Sign Up (FREE!)
3. Kemudian akan ada forum formulir isikan sesuai data yang diminta, seperti Email, Url Blog/situs, dan Password, lalu Centang pada I agree to the Usage and Privaci Agreements, kemudian klik Sumbit
4. Kemudian Copy Script yang muncul lalu buka akun blogger anda
5. Pada akun Blogger anda Pilih Template kemudian klik Edit HTML Klik Lanjutkan
6. Cari Kode </head>
7. Setelah ketemu Pastekan Script tadi di atas/ sebelum kode </head>
8. Klik Simpan Template
Dengan begitu apabila ada orang yang mencopy artikel anda maka akan muncul sumber/link dari situs artikel anda.
Seorang Admin blogger kebanyakan yang membuat label
blognya telalu banyak sehingga jika ditampilkan ke widged akan terlihat
memanjang ke bawah, tentunya ini tidak cocok untuk untuk tampilan
karena menggunakan banyak tempat sedangkan widget yang lainnya memiliki
tempat yang tidak sesuai dengan posisi yang diinginkan.
1. Masuk ke akun blogger anda
2. Pilih Template laluk klik EDIT HTML lalu Klik Lanjutkan
3. Kemudian Cari kode berikut ini ]]></b:skin>
4. kemudian tambahkan kode berikut ini sebelum kode ]]></b:skin> (kode yang dicari tadi)
#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}
5. Ganti yang berwarna merah sesuai panjang yang di inginkan.
6. Lalu Klik Simpan Template dan lihat hasilnya.
Nah bagaimana cara mengatasinya, untuk mengatasinya hanya dengan Membuat Scroll pada label
sehingga panjangnya bisa di kontrol sesuai dengan keinginan pengguna,
dengan begitu admin/ pengguna dapat memasang widget yang lain karena
telah mengurangi tempat label dan tempat widget lain menjadi luang.
Untuk cara membuat Scroll pada Label juga tidak terlalu sulit hanya dengan sedikit mengubah/menambah kode CSS dan kode HTML. berikut langkah-langkahnya.
1. Masuk ke akun blogger anda
2. Pilih Template laluk klik EDIT HTML lalu Klik Lanjutkan
3. Kemudian Cari kode berikut ini ]]></b:skin>
4. kemudian tambahkan kode berikut ini sebelum kode ]]></b:skin> (kode yang dicari tadi)
#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}
5. Ganti yang berwarna merah sesuai panjang yang di inginkan.
6. Lalu Klik Simpan Template dan lihat hasilnya.
Jika cara di atas tidak berhasi coba kembali ke langkah 1 dan 2 lalu cari kode yang telah di tambahkan tadi kemudian hapus, dan ikuti langkah berikut ini
1. Cari kode berikut
<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
<h2><data:title></data:title></h2>
</b:if>
<div class="widget-content">
<ul>
<b:loop values="data:labels" var="label">
<li>
<b:if cond="data:blog.url == data:label.url">
<span dir="data:blog.languageDirection">
<data:label.name>
</data:label.name></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label.name>
</data:label.name></a>
</b:else>
<span dir="ltr">(<data:label.count>)</data:label.count></span>
</b:if></li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></div>
2. Ganti dengan kode berikut ini
<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
<h2><data:title></data:title></h2>
</b:if>
<div class="widget-content">
<div style="overflow: auto; height: 300px;">
<ul>
<b:loop values="data:labels" var="label">
<li>
<b:if cond="data:blog.url == data:label.url">
<span dir="data:blog.languageDirection">
<data:label.name>
</data:label.name></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label.name>
</data:label.name></a>
</b:else>
<span dir="ltr">(<data:label.count>)</data:label.count></span>
</b:if></li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></div>
</div>
1. Cari kode berikut
<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
<h2><data:title></data:title></h2>
</b:if>
<div class="widget-content">
<ul>
<b:loop values="data:labels" var="label">
<li>
<b:if cond="data:blog.url == data:label.url">
<span dir="data:blog.languageDirection">
<data:label.name>
</data:label.name></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label.name>
</data:label.name></a>
</b:else>
<span dir="ltr">(<data:label.count>)</data:label.count></span>
</b:if></li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></div>
2. Ganti dengan kode berikut ini
<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
<h2><data:title></data:title></h2>
</b:if>
<div class="widget-content">
<div style="overflow: auto; height: 300px;">
<ul>
<b:loop values="data:labels" var="label">
<li>
<b:if cond="data:blog.url == data:label.url">
<span dir="data:blog.languageDirection">
<data:label.name>
</data:label.name></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label.name>
</data:label.name></a>
</b:else>
<span dir="ltr">(<data:label.count>)</data:label.count></span>
</b:if></li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></div>
</div>
