Membuat Berbeda Font Pada Setiap Artikel Blog

Membuat Berbeda Font Pada Setiap Artikel Blog - Blogger menyediakan beberapa jenis font, dengan demikian pemilik Blog akan dengan muda mengubah berbagai jenis font pada setiap artikelnya. Font memiliki peranan cukup penting pada sebuah Blog, karena jika salah dalam memilih font tampilan tulisan pada artikel Blog tidak terlihat cantik.

Penulisan pada Artikel dapat dilakukan lebih dari satu jenis font seperti Arial, Couries, Georgia dan seterusnya. Selain pengaturan jenis font dapat di lakukan pada saat penulisan Artikel, dapat juga diatur melalui CSS. Berikut ini contoh pengaturan jenis font dalam CSS :

.post-body {
font-family: 'Arial',sans-serif;
font-weight: 100;
color: #000;
}

Pada pengaturan CSS memrintahkan Browser untuk menerapkan jenis font Arial untuk di artikel Blog, dengan demikian pada setiapp Anda mempublikasikan Artikel maka jenis font pada Artikel akan muncul jenis Arial. Untuk merubahnya jenis font Anda cukup mengubah pengaturan pada CSS tersebut.

Apabila Anda ingin merubah pada paragraf tertentu pada Artikel, cara diatas tentunya tidak dapat dilakukan karena pengaturan pada CSS untuk mengubah pengaturan jenis font keseluruhan. Untuk mengubah sebagian cukup mudah cukup mem-Block pada tulisan kemudian Anda pilih jenis font pada menu [ f  ] pada pengaturan font di Artikel terdapat beberapa daftar jenis font didalamnya.

Namun bagaimana jika ingin menggunakan font lain yang tidak ada dalam daftar font tersebut? Misalnya font Roboto. Caranya tambahkan link untuk jenis font yang akan Anda gunakan. Lalu, terapkan font secara inline.

Contohnya :

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald' rel='stylesheet' type='text/css'/>
<span style="font-family: Roboto,'Times New Roman',serif;">Masukkan Teks Anda di sini...</span>

Mengguratkan sejuta warna.
Yang dapat membuatmu indah...
Dapatkan aku melukiskan cinta untukmu?
Seperti notasi mimpi kupu--kupu.
bersayap biru,
Terbang bersama menuju Negeri pelangi
Dapatkan aku melukiskan cinta untukmu?
mengisyaratkan lelahku dijalan resah!


Anda bisa membuatnya dengan beberapa paragraf!

Mudah bukan, semoga bermanfaat!

Sliding Login/Register Form Panel di Blog

Sliding Login/Register Form Panel di Blog - Kita sering melihat kata Login dan Register kalau kita mau masuk FB, Tweter, Yahoo, dan lain-lain. Login berupa proses pintu masuk bagi pengguna untuk mengakses keseluruhan halaman suatu domain jaringan. Mungkin Anda juga pernah melihat kata sing in, sing in digunakan untuk mengakses halaman tertentu dalam suatu domain jaringan. Itulah perbedaan Login dan sing in.

Biasanya Login dan Register disediakan di Website atau Blog yang sudah banyak memiliki anggota dan situs-situs yang menyediakan layanan jaringan community, untuk menciptakan Sliding Login/Register Form Panel di Blog ini menggunakan Jquery. untuk contohnya Anda bisa melihat Screnshoot dibawah ini :

Bagaimana Anda tertarik, berikut ini langkah-langkahnya :

L1-Pemasangan CSS

Buka Editor Template kemudian Anda cari kode ]]></b:skin> , kemudian copy kode dibawah ini dan pastekan diatasnya

CSS

/*clearfix*/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 1px;
color: white;
font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
width: 100%;
height: 320px;
color: #999999;
background: #355B89;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

L2-Pemasangan Javascript

Selanjutnya Anda cari kode </head> , kemudian terapkan kode dibawah ini sebelumnya :

Javascript

<script src="http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js"  type='text/javascript'/>
<script style='display:none'  type='text/javascript'>
$(document).ready(function() {  
// Expand Panel  
$(&quot;#open&quot;).click(function(){  
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);  
});  
  
// Collapse Panel  
$(&quot;#close&quot;).click(function(){  
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);  
});  
  
// Switch buttons from &quot;Log In | Register&quot; to  &quot;Close Panel&quot; on click  
$(&quot;#toggle a&quot;).click(function () {  
$(&quot;#toggle a&quot;).toggle();  
});  
  
});  
</script>

L3-Pemasangan HTML

Pemasangan HTML merupakan tahap akhir, Anda cari kode </body> kemudian kopy kode dibawah ini dan pastekan diatasnya

HTML

<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Welcome In Aak Website</h1>
<h2>Contoh Sliding Login Dengan JQuery</h2>
<p class='grey'>Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member</p>
<h2>Tutorial Blog</h2>
<p class='grey'>Untuk membuatnya Silahkan : <a href='http://www.aak-share.com/2014/12/sliding-loginregister-form-panel-di-blog.html' title='Tutorial Blog'>klik di Sini</a></p>
</div>

<div class='left'>
<form action='#' class='clearfix' method='post'>
<h1 class='padlock'>Member Login</h1>
<label class='grey' for='log'>Username:</label>
<input class='field' id='log' name='log' size='23' type='text' value=''/>
<label class='grey' for='pwd'>Password:</label>
<input class='field' id='pwd' name='pwd' size='23' type='password'/>
<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
<div class='clear'/>
<input class='bt_login' name='submit' type='submit' value='Login'/>
<a class='lost-pwd' href='#'>Lost your password?</a>

</form>
</div>
<div class='left right'>
<form action='#' method='post'>
<h1>Not a member yet? Sign Up!</h1>
<label class='grey' for='signup'>Username:</label>
<input class='field' id='signup' name='signup' size='23' type='text' value=''/>
<label class='grey' for='email'>Email:</label>
<input class='field' id='email' name='email' size='23' type='text'/>
<label>A password will be e-mailed to you.</label>
<input class='bt_register' name='submit' type='submit' value='Register'/>
</form>
</div>

</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Halo Semuanya</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Masuk | Daftar</a>
<a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a>
</li>

<li class='right'/>
</ul>
</div>
<!-- / top -->
</div>
<!-- panel -->

Semoga bermanfaat!

Animasi Gerak Tanggal Tua, Uang habis dan Gajian

Animasi Gerak Tanggal Tua, Uang habis dan Gajian - Mungkin Anda merasa galau apabila sudah masuk tanggal tua, isi dompet mulai menipis. Namun betapa bahagianya jika masuk awal bulan karena menandakan akan segera menerima gaji atau honor dimana Anda bekerja.

Mari kita aplikasikan keadaan tersebut kedalam Aplikasi Chat BBM menjadi Display Picture DP BBM pada ponsel Anda. Disini saya masih merangkum beberapa Animasi Gambar karena masih perlu belajar membuat Animasi gerak sendiri agar hasilnya menjadi baik hehehe...

Langsung saja berikut ini rangkuman DP BBM Animasi Gerak Tanggal Tua, Uang habis dan Gajian, semoga dapat membantu dan bermanfaat. Tak lupa juga saya sampaikan Anda bisa Mendownload langsung pada sumber yang Anda di Gambar.

Sumber: kochiefrog.com

Sumber: kochiefrog.com

Sumber: @animasibbm

Sumber: chahndeso.blogspot.com

Sumber: kochiefrog.com

Sumber: pherrie.blogspot.com

Sumber: @animasiDPBBM

Sumber: @animasiDPBBM

Sumber: @animasiDPBBM

Sumber: kochiefrog.com

Sumber: @animasiDPBBM

Sumber: kochiefrog.com

Sumber: kochiefrog.com

Sumber: @animasiDPBBM

Sumber: @animasiDPBBM

Semoga bermanfaat.

Indahnya Background Pada Gambar

Indahnya Background Pada Gambar - Desain Background pada gambar Anda bisa membuatnya dengan software image editing semacam Correl Draw, Photoshop dan photoscape . Dengan membuat Background pada gambar menambah mempercantik tampilan pada gambar kemudian di tambahkan pada Artikel baru Anda.

Background pada gambar yang telah Anda tambahkan pada Artikel baru tentunya tidak dapat anda ubah kembali, sobat disini Aak akan memberi Tips dan trik mengubah background gambar pada artikel sesuai yang Anda suka. Untuk Demo-nya Anda bisa melihatnya pada gambar dibawah ini :

                                                                                                                         Ilustrasi Gambar Standar

Ilustrasi Pengertian Google Adsense

Anda tertarik, berikut ini caranya :

1. Login keakun Blogger
2. Pilih Template, lalu klik Edit HTML
3. Selanjutnya anda cari kode ]]></b:skin>
4. Kemudian copy kode dibawah ini dan pastekan sebelumnya :

.wp-caption {
max-width: 103%;
box-shadow: 0 0px 0px #999;
background-color: #eee;
}
.wp-caption{
clear: both;
}
.wp-caption {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
.dl {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

5. Simpan Template
6. Selanjutnya Anda menuju Entri baru, pilih Mode HTML kemudian copy code dibawah ini dan pastekan dicontent :

<dl class="wp-caption aligncenter" id="attachment_518" style="width: 810px;">
<dt class="wp-caption"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKSlnjFMbkHuofufFZJW04jY91Xg5OkHICWgruuqayZ6olKOQxognQIBBVlp8FkUtvxFySJsMlSq8tEzkmFZDnRDTi_0rT2_9TRQEl2_-fKE37Z-guSM7fpSzcD2YpPh0ipnt2IxSLgs/s1600/google-adsense.png">
<img alt="Indahnya Background Pada Gambar" class="size-full wp-image-518" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKSlnjFMbkHuofufFZJW04jY91Xg5OkHICWgruuqayZ6olKOQxognQIBBVlp8FkUtvxFySJsMlSq8tEzkmFZDnRDTi_0rT2_9TRQEl2_-fKE37Z-guSM7fpSzcD2YpPh0ipnt2IxSLgs/s1600/google-adsense.png " height="299" width="800" /></a></dt>
<dd class="wp-caption-dd" style="color: red; font: 12px verdana; text-align: right; text-decoration: blink;"> Ilustrasi gambar Background</dd> </dl>

Note :
> Gambar yang digunakan memiliki warna background Putih

7. Publikasikan

Mudah Bukan, Selamat Mencoba!

Membuat Iklan Seperti Google Adsense

Iklan Seperti Google Adsense - Google Adsens adalah program perusahaan google yang bergerak di bidang periklanan. Google adsense memberi peluang usaha atau bisnis kepada para webmaster untuk menjadi mitra dari google adsense tersebut, yakni menjadi publisher online. Google adsense (GA) akan membayar publishernya berdasarkan klik pada iklan yang muncul di web si publisher tersebut.

Demo   CODE

Sebuah Blog bisa mendaftar Google Adsens sekurang-kurangnya selama tiga bulan dari masa pembuatan Blog, namun jika Anda sudah mendaftar Google Adsens namun belum juga di approve solusinya Anda bisa memasang iklan yang mirip seperti Google Adsens. Bedanya dalam pemasangan ini Anda tidak bisa mendapatkan rupiah, untuk pembuatannya berikut ini langkah-langkahnya :

1. Login keakaun Blogger
2. Pilih Layout/Tata Letak
3. Klik add Gadget
4. Lalu pilih HTML/Javascript
5. Kemudian copy kode dibawah ini dan pastekan pada content yang tersedia :

<div id="iklan-teks">
<!-- iklan ke 1 -->
<div data-header="Blogger Tutorial" style="border-top: none;">
<span class="isi-iklan"><a class="judul" href="http://aak-share.com/" target="_blank">Blogger Tutorial</a>
<a href="http://www.aak-share.com/" target="_blank">blog.aak-share.com</a>
<span class="isi">Blogger Informasi and Tutorial Terbaru.</span>
<a class="panah-besar" href="http://www.aak-share.com/" target="_blank"><img alt="arrow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6zCJr30vjV0EFpOGD6DTS6X4a_PfTo4pR6dlop61aevOPffOrKJMkCtp8tkHvGNHHUmNWqFWjWUEo01Fe5Rc_PmpDtEa6CNMd9tHFI0gmrBJjA-bao7I-6FZLnGbFEw7nb1x4ZYwCeo/s1600/icon_chevron_white.png" style="height: 19px; margin-left: 2px; margin-top: 7px; width: 12px;" /></a>
</span></div>

<!-- iklan ke 2 -->
<div data-header="Pasang Iklan di Sini">
<span class="isi-iklan"><a class="judul" href="http://www.aak-share.com/2014/12/iklan-seperti-google-adsense.html" target="_blank">Pasang Iklan di Sini</a>
<a href="http://www.aak-share.com/2014/12/iklan-seperti-google-adsense.html" target="_blank">blog.aak-share.com</a>
<span class="isi">Pasang iklan Anda di sini, hanya 50 ribu / bulan.
<a class="panah-besar" href="https://www.blogger.com/href=" http:="" iklan-seperti-google-adsense.html="" target="_blank" www.aak-share.com=""><img alt="arrow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6zCJr30vjV0EFpOGD6DTS6X4a_PfTo4pR6dlop61aevOPffOrKJMkCtp8tkHvGNHHUmNWqFWjWUEo01Fe5Rc_PmpDtEa6CNMd9tHFI0gmrBJjA-bao7I-6FZLnGbFEw7nb1x4ZYwCeo/s1600/icon_chevron_white.png" style="height: 19px; margin-left: 2px; margin-top: 7px; width: 12px;" /></a></span>
</span></div>

<!-- iklan ke 3 -->
<div data-header="Pasang Iklan di Sini">
<span class="isi-iklan"><a class="judul" href="http://www.aak-share.com/2014/12/iklan-seperti-google-adsense.html" target="_blank">Pasang Iklan di Sini</a>
<a href="http://www.aak-share.com/2014/12/iklan-seperti-google-adsense.html" target="_blank">blog.aak-share.com</a>
<span class="isi">Pasang iklan Anda di sini, hanya 50 ribu / bulan.
<a class="panah-besar" href="http://www.aak-share.com/2014/12/iklan-seperti-google-adsense.html" target="_blank"><img alt="arrow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6zCJr30vjV0EFpOGD6DTS6X4a_PfTo4pR6dlop61aevOPffOrKJMkCtp8tkHvGNHHUmNWqFWjWUEo01Fe5Rc_PmpDtEa6CNMd9tHFI0gmrBJjA-bao7I-6FZLnGbFEw7nb1x4ZYwCeo/s1600/icon_chevron_white.png" style="height: 19px; margin-left: 2px; margin-top: 7px; width: 12px;" /></a></span>
</span></div>

<!-- iklan ke 4 -->
<div data-header="Pasang Iklan di Sini">
<span class="isi-iklan"><a class="judul" href="http://www.aak-share.com/2014/12/iklan-seperti-google-adsense.html" target="_blank">Pasang Iklan di Sini</a>
<a href="https://www.blogger.com/href=" http:="" iklan-seperti-google-adsense.html="" target="_blank" www.aak-share.com="">blog.aak-share.com</a>
<span class="isi">Pasang iklan Anda di sini, hanya 50 ribu / bulan.
<a class="panah-besar" href="http://www.aak-share.com/2014/12/iklan-seperti-google-adsense.html" target="_blank"><img alt="arrow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6zCJr30vjV0EFpOGD6DTS6X4a_PfTo4pR6dlop61aevOPffOrKJMkCtp8tkHvGNHHUmNWqFWjWUEo01Fe5Rc_PmpDtEa6CNMd9tHFI0gmrBJjA-bao7I-6FZLnGbFEw7nb1x4ZYwCeo/s1600/icon_chevron_white.png" style="height: 19px; margin-left: 2px; margin-top: 7px; width: 12px;" /></a></span>
</span></div>

<!-- info -->
<span class="info-iklan">Iklan oleh AakShare</span>
<span class="info-icon"><a href="http://www.aak-share.com/2014/12/iklan-seperti-google-adsense.html" target="_blank"><img alt="info" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLcuoXaY0dn5LGAv4AyxdcEoLRejCbWglGqr9phvAhyphenhyphenmy7xnXffX_nk2JwEjRWyNELRjlaBQXJdQXu7NeI1_lTFceYq1icE2xa9ULdN48iRY1xiZQzshQnb_k_1Gw_aqHs86f04KG8PSg/s1600/info-iklan.png" /></a></span></div>

6. Selanjutnya Anda cari kode ]]></b:skin>, kemudian coly kode di bawah ini dan terapkan di atasnya.

#iklan-teks {
width:304px;
height:400px;
background-color:white;
position:relative;
overflow:hidden;
margin:0 auto;
}
#iklan-teks h2.iklan-header {
cursor:pointer;
background-color:white;
background-image:none;
font:normal 20px Verdana, Tahoma,Serif;
color:blue;
border-top:1px solid #d8d8d8;
padding:10px;
margin:0 0;
position:relative;
text-transform:none;
letter-spacing:0;
}
#iklan-teks h2.iklan-header:first-child {
border-top:none;
}
#iklan-teks h2.active {
display: none;
}
#iklan-teks h2.iklan-header:before{
content:"";
width:0;
height:0;
position:absolute;
top:20px;
right:15px;
border:5px solid transparent;
border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
height:100px;
padding:10px 70px 10px 10px;
font:normal 13px Verdana, Tahoma,Serif;
color:white;
border-top:1px solid #d8d8d8;
}
.judul {
font:normal 20px Verdana, Tahoma,Serif;
color:blue;
margin:0 0 5px 0;
}
a.judul{
font:normal 20px Verdana, Tahoma,Serif !important;
color:blue !important;
text-decoration:none;
display:inline-block;
}
a:hover.judul {
font:normal 20px Verdana, Tahoma,Serif !important;
color:blue;
text-decoration:underline;
}
.isi-iklan a{
font:normal 13px Verdana, Tahoma,Serif;
color:green;
text-decoration:none;
display:block;
margin-bottom:10px;
}
.isi-iklan a:hover{
color:green;
text-decoration:none;
}
.isi {
padding-top:15px;
color:#222;
text-align:left !important;
}
.panah-besar {
background: #4d90fe;
border-radius: 50%;
cursor: pointer;
height: 34px;
float: right;
margin-right: -60px;
margin-top: -40px;
width: 34px;
text-align: center;
line-height: 34px;
}
.panah-besar:hover {
background: #4472bd;
}
.info-icon {
width:15px;
height:15px;
position:absolute;
top:0;
right:0;
cursor:pointer;
}
.info-iklan {
background:#d3d3d3;
width:100px;
height:15px;
border-bottom-left-radius:4px;
position:absolute;
top:0;
right:0;
color:#000;
font:normal 11px Arial,Sans-Serif;
text-align:left;
overflow:hidden;
padding-right:19px;
padding-left:5px;
display:none;
}

7. Berikutnya Anda cari kode </head> , copy kode di bawah ini dan terapkan di atasnya.

<script src="https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js" type="text/javascript"></script>

8. Simpan Template, dan silahkan Anda lihat hasilnya.

Mudah bukan, selamat mencoba.

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

Font Roboto lebih dikenal sebagai Ice Cream Sandwich (ICS), font ini dikenalkan oleh Google bersamaan dengan dirilisnya Android 4.0. Font Roboto support dengan layar kecil smartphone maupun layar besar untuk tablet . Font ini selain digunakan di OS Android dan juga di situs Google Play Store.

Font Roboto terlihat sederhana, namun dari kesederhanaan itu tampak sebuah rasa elegan . Font ini menurut saya mirip dengan Arial bahkan lebih mirip lagi dengan Helvetica. Font Roboto banyak disukai oleh pengguna OS karena jenis font ini terlihat tidak menyilaukan mata dan jelas.

Belum lama ini Blog Aak mengganti font jenis Roboto , bagi Anda juga yang tertarik memasang Font Roboto pada Blog-nya berikut ini langkah-langkahnya :

Buka Editor Template kemudian copy kode berikut ini dan letakkan URL font Roboto di atas kode </head>,

<style type="text/css">@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(//fonts.gstatic.com/s/roboto/v14/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v14/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v14/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v14/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v14/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url(//fonts.gstatic.com/s/roboto/v14/12mE4jfMSBTmg-81EiS-YRsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(//fonts.gstatic.com/s/roboto/v14/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(//fonts.gstatic.com/s/roboto/v14/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Slab Thin'), local('RobotoSlab-Thin'), url(//fonts.gstatic.com/s/robotoslab/v6/MEz38VLIFL-t46JUtkIEgCeJLMOzE6CCkidNEpZOseY.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url(//fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJR_xHqYgAV9Bl_ZQbYUxnQU.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(//fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37ZobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(//fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJTqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}</style>

Penggunaan font Roboto dalam CSS

Setelah penerapan kode diatas selasai , selanjutnya kepengaturan CSS agar font pada Blog Anda berubah menjadi Roboto. Berikut ini contoh diambil dari kode font Blog Aak :

.post h2 {
font-family: "Roboto Slab", Arial, Sans-Serif;
font-size: 240%;
font-style:normal;
font-weight:700;
}

Beberapa contoh penggunaan pada CSS.

CSS

.nama css {
font-family: 'Roboto';
font-size: 14px;
font-style: italic;
font-weight: 400;
}



Hasilnya :

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

CSS

.nama css {
font-family: 'Roboto';
font-size: 20px;
font-style: normal;
font-weight: 500;
}



Hasilnya:

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

CSS

.nama css {
font-family: 'Roboto';
font-size: 20px;
font-style: normal;
font-weight: 700;
}

Hasilnya:

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

CSS

.nama css {
font-family: 'Roboto Slab';
font-size: 24px;
font-style: italic;
font-weight: 100;
}


Hasilnya :

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

CSS:

.nama css {
font-family: 'Roboto Slab';
font-size: 24px;
font-style: normal;
font-weight: 400;
}

Hasilnya:

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

CSS:

.nama css {
font-family: 'Roboto Slab';
font-size: 24px;
font-style: normal;
font-weight: 700;
}

Hasilnya:

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

Penjelasan :

1. Ganti properti font atau font-family dalam template Anda dengan font-family:'Roboto', Arial, sans-serif atau font:'Roboto', Arial, sans-serif.
2. Untuk huruf  tebal tidak menggunakan font-weight: bold , karena pada font Roboto ini menggunakan font-weight: 700; 
3. Apabila properti font-weight:bold tidak dibutuhkan kembali dengan demikian ganti semuanya dengan font-weight: 700; karena value bold sudah ditetapkan dalam font Roboto.

Selamat mencoba dan semoga bermanfaat!