Rivado Blog

Minggu, 23 Februari 2014

Cara Membuat Gambar Di Latar Belakang Blog Berubah Saat Membuka Posting Blog

How to Make Background Image Change When Open Blog Post

Akhirnya setelah berusaha dengan mencari di google, saya menemukan cara yang digunakan di blog D'jogz. Penasaran cara membuat suatu gambar atau bahkan format template berubah ketika membuka artikel di blog? Caranya cukup mudah.

Buka edit HTML

Cari kode </head> . <head> adalah tempat yang sering diletakkan javascript.

Sumber kode: http://www.bloggersentral.com/2010/08/targeting-specific-pages-with.html

<b:if cond='data:blog.pageType == "item"'>
<style>
#header-wrapper {
background-image: url(http://static3.wikia.nocookie.net/__cb20130422002550/date-a-live/images/a/a4/Gamepic1.png);background-position: center;
}
</style>
</b:if>

Ganti header-wrapper dengan tag gambar. Baca disini http://rivadotaku.blogspot.com/2014/02/cara-mengetahui-tag-suatu-elemen-untuk.html. Ganti http://static3.wikia.nocookie.net/__cb20130422002550/date-a-live/images/a/a4/Gamepic1.png

dengan URL gambar.

Untuk "kondisi" lain lihat di http://www.bloggersentral.com/2010/08/targeting-specific-pages-with.html

Cara Mengetahui Tag Suatu Elemen untuk CSS

Tag sering diperlukan untuk coding CSS. Tag misalnya #Tag untuk elemen id, .Tag untuk elemen class. Contohnya <img class=klas gambar... Berarti untuk mengubah tampilannya dengan CSS, digunakan

.klas gambar {....}. Cara mengetahuinya dapat dengan Inspect Element.

Cara Membuat Text Box Keren dengan Gaya CSS

Cara membuat text box, copy paste tulisan berikut

<textarea rows="5" cols="20" name="Privacy Policy" readonly="readonly" style="height: 260px; margin: 2px; width: 630px;">Your text here</textarea>

Ganti your text here dengan isi yang anda inginkan, contoh

<textarea rows="5" cols="20" name="Privacy Policy" readonly="readonly" style="height: 260px; margin: 2px; width: 630px;">Isi yang anda inginkan</textarea>

Cara memperindah dengan CSS. Tagnya berupa textarea, cari kode berikut

]]></b:skin>

Diatas kode tersebut copy paste kode berikut

textarea {

font-family: Ubuntu, sans-serif;monospace

}

textarea {

-webkit-appearance: textarea;

background-color: white;

border-left: solid;

border-image-source: initial;

border-image-slice: initial;

border-image-width: initial;

border-image-outset: initial;

border-image-repeat: initial;

-webkit-rtl-ordering: logical;

-webkit-user-select: text;

flex-direction: column;

resize: auto;

cursor: auto;

padding: 2px;

white-space: pre-wrap;

word-wrap: break-word;

border-left-color: green;

}

Ganti border-left dengan border jika anda mau memberi batas ke semua sisi. Ganti warna white dan green dengan warna yang anda inginkan.

Tambahkan kode lain yang anda mau (bila mengerti CSS, hehehe).

Sabtu, 22 Februari 2014

Vadotaku 002 R: My Blogger Page - My Template

Vadotaku 002 Blogger Template (My Blogger Profile) adalah template pertama buatan saya yang saya sebar luaskan yang terinspirasi profil twitter, facebook dan google+. Dilengkapi dengan breadcrumb dan drop down menu. Silahkan Download.

Cara Install

Mengganti gambar, cari dan ganti alamat-alamat gambar berikut dengan alamat gambar yang anda inginkan

Gambar Foto Profil http://clipartist.info/Art/April/User_Icon_user_icon.svg

Gambar Latar Belakang Foto Profil http://wallpicshd.com/wp-content/uploads/2013/08/Windows-8-Backgrounds-Photos.jpg

Gambar Latar Belakang Foto Profil di Posting Blog http://downloadwindows8themes.com/wp-content/uploads/2013/03/Glassy-Windows-8-background.jpg

Gambar Latar Belakang Blog http://fc06.deviantart.net/fs71/f/2012/124/1/4/another_turquoise_windows_8_background_by_gifteddeviant-d4yhtd2.png

Mengisi Drop Down Menu

Cari kode berikut

<div id='ST-Container'>

Maka akan ditemui kode berikut

<div id='ST-Container'>

<ul id='menu'>

<li class='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li class='current'><a href='http://rivadotaku.blogspot.com/2014/01/daftar-isi.html'>Daftar Isi</a></li>

<li data-role='dropdown'><a href='http://rivadotaku.blogspot.com/search/label/Blogger'>Blogging</a>

<ul>

<li><a href='http://rivadotaku.blogspot.com/search/label/blogger%20tips'>Blogger Tips</a></li>

<li><a href='http://rivadotaku.blogspot.com/search/label/Blog%20Widget'>Blogger Widgets</a></li>

<li><a href='#'>Item 3</a></li>

</ul></li>

<li><a href='#'>Page 2</a>

<ul>

<li><a href='#'>Item 1</a></li>

<li><a href='#'>Item 2</a></li>

<li><a href='#'>Item 3</a></li>

</ul></li>

<li><a href='#'>Page 3</a>

<ul>

<li><a href='#'>Item 1</a></li>

<li><a href='#'>Item 2</a></li>

<li><a href='#'>Item 3</a></li>

</ul></li>

<li><a href='#'>Page 4</a>

<ul>

<li><a href='#'>Item 1</a></li>

<li><a href='#'>Item 2</a></li>

<li><a href='#'>Item 3</a></li>

</ul></li>

<li><a href='http://www.safetricks.net/'>Create This</a></li>

</ul></div>

Ganti kode disamping kanan<a href... seperti # atau www.dot.com dengan alamat link yang dituju, ganti item 1 atau huruf lain disamping kanan<a href...>. Format nya adalah berikut

<a href='www.halamanblog1'>Halaman blog 1</a>

Menambah Menu

<li><a href='#'>Menu</a></li>

Menambah submenu, copy paste diatas </ul></li>

<li><a href='#'>Submenu</a></li>

Menambah menu dan submenu

<li><a href='#'>Menu</a>

<ul>

<li><a href='#'>Submenu 1</a></li>

<li><a href='#'>Submenu 2</a></li>

<li><a href='#'>Submenu 3</a></li>

</ul></li>

Komentar bila ada kesalahan. Berikan rating

Demo dan Cara Install

Download Template note: gunakan file .XML jangan yang berupa .txt

Jumat, 21 Februari 2014

Cara Membuat Tombol Back To Top dan Back To Bottom

Cara Simple

Buatlah widget di tata letak > HTML/Javascript

Copy Paste kode berikut

<a href="#"><img src="rainbow.gif" height="32px" width="32px"></a>

Ganti rainbow.gif dengan alamat gambar, ganti 32px dengan ukuran yang anda inginkan.

Cara membuat Smooth Scroll Back To Top / Meluncur Dengan Lembut

helplogger style : sumber = http://helplogger.blogspot.com/2013/03/how-to-add-go-to-top-and-go-to-bottom.html

Buka Template > Edit HTML, klik kiri di area penulisan dan tekan CTRL+F

1.Buka area kode CSS dengan mencari kode berikut

]]></b:skin>

2.Diatas kode diatas, tambahkan kode CSS berikut

Kustomisasi:

Ganti teks warna biru dengan gambar arah panah

Ganti ...px disamping tulisan hijau untuk mengganti ukuran gambar

/kustomisasi

/* Up and Down Buttons with jQuery

----------------------------------------------- */

.button_up{

padding:7px; /* Distance between the border and the icon */

background-color:white;

border:1px solid #CCC; /* Border Color */

position:fixed;

background: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0FFZDKdd7v4pdYEzGtb_8Yo-rHvv3QdnLBsQv4hC_ntfgEItpWGnffoS0IWuIIOHIxZXNV4bEW9wVqe2q0vymFRSzoC1xOOkVv2pp_8taKD9Hoq36yvjMdgdBpxvm1c0lJrGCOoPJgZA/s16/arrow_up.png) no-repeat top left;

background-position:50% 50%;

width:20px; /* Button's width */

height:20px; /* Button's height */

bottom:280px; /* Distance from the bottom */

right:5px; /* Change right to left if you want the buttons on the left */

white-space:nowrap;

cursor: pointer;

border-radius: 3px 3px 3px 3px;

opacity:0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

.button_down{

padding:7px; /* Distance between the border and the icon */

background-color:white;

border:1px solid #CCC; /* Border Color */

position:fixed;

background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiVUBjef6HphwAvZxBVtPqbr7-m5DxCmheRV_ciNH3_yKDuTn7Qi1seZnPyjKpzbR2FY-GEJPg0gVMQ58rKZ38wIecnlqG9YPoW2rzE3n9u6vUs2R_UtURrMGrbm0eU8aJwKoHSszQMiY/s16/arrow_down.png) no-repeat top left;

background-position:50% 50%;

width:20px; /* Button's width */

height:20px; /* Button's height */

bottom:242px; /* Distance from the bottom */

right:5px; /* Change right to left if you want the buttons on the left */

white-space:nowrap;

cursor: pointer;

border-radius: 3px 3px 3px 3px;

opacity:0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

3.Buka area akhir wilayah </body> dengan mencari kode </body>

4.Diatas </body> copy paste kode javascript berikut

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

<div class='button_up' id='button_up' style='display:none;'/>

<div class='button_down' id='button_down' style='display:none;'/>

<script>

//<![CDATA[

(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {

var $elem = $('body');

$('#button_up').fadeIn('slow');

$('#button_down').fadeIn('slow');

$(window).bind('scrollstart', function(){

$('#button_up,#button_down').stop().animate({'opacity':'0.2'});

});

$(window).bind('scrollstop', function(){

$('#button_up,#button_down').stop().animate({'opacity':'1'});

});

$('#button_down').click(

function (e) {

$('html, body').animate({scrollTop: $elem.height()}, 800);

} );

$('#button_up').click(

function (e) {

$('html, body').animate({scrollTop: '0px'}, 800);

} );});

//]]>

</script>

5.Simpan Template

Komentar bila ada kesalahan

Minggu, 09 Februari 2014

Otaku Test : Platinum

Version Test 01

15 Level - Easy

Minggu, 02 Februari 2014

Cara Bermain Game Tanpa Lag dan Cepat dengan Razer Game Booster dan Baidu Game Faster

Mengalami Lag? Ingin bermain dengan kualitas baik tanpa lag? Caranya dengan memadamkan aktivitas lain. Caranya dengan menggunakan aplikasi berjenis game booster.

Dengan Razer Game Booster

Download disini

Lakukan proses instalasi. Buka aplikasi, login, jika belum lakukan registrasi langsung di aplikasi. Caranya cukup mudah.

Di bagian games, tambahkan game yang akan anda mainkan dengan menekan tombol + .

Mainkan game tersebut.

Selamat Bermain

Razer Game Booster Review

Rating saya 9/10. ''Aplikasi ini keren, mulai dari tampilan. Sayang sekali saya masih mengalami lag'. Walaupun begitu perbedaannya dari sebelum dan sesudah memakai sungguh beda.''

CNET Rating

CNET Editors' Rating:

4.5 stars

Outstanding

Average User Rating:

4.0 starsout of 484 votes

Baidu Game Faster

Coming Soon