Abu Maryana: Tutorial Blogger

Showing posts with label Tutorial Blogger. Show all posts

8 Penyedia Domain Gratis Terpercaya 'Tanpa Survei & Referal'

Sebagai orang yang baru mencoba dan memulai dunia web, tentu akan membutuhkan sebuah domain. Ya, domain memang menjadi krusial ketika kita berbicara sebuah web, pasalnya, ibarat sebuah rumah, domain adalah alamatnya.

Hanya saja, tidak semua domain itu gratis, jika kamu ingin memiliki domain seperti .com, .net dan .info, tentu kamu harus mengeluarkan biaya tertentu, karena domain seperti itu tidaklah gratis.

Namun, sekarang saya akan membagikan daftar situs penyedia domain gratis yang terpercaya, kebanyakan di luar sana menawarkan domain gratis dengan 'embel-embel' domain gratis, tapi pada akhirnya mereka harus menyelesaikan 'misi' yang diberikan, seperti survei dan referal.

Berikut daftarnya :

Nama Domain	URL Situs
Domain .tk	www.dot.tk/en/index.html
Domain .uni.me	www.uni.me/index.php
Domain .co.nr	www.freedomain.co.nr
Domain .ga / .cf / .ml	www.freenom.com/en/index.html
Domain .cu.cc	www.registry.cu.cc
Domain .co.vu	www.codotvu.com
Domain .nom.za	www.nom.za
Domain .de.nu	www.nic.de.nu/us/start/

Untuk cara pakai dan bagaimana menghubungkannya dengan Hosting, Mungkin akan saya bahas lain waktu ya. Hehe

Terima Kasih www.jalantikus.com

3:52 PM

2 comments

Cara Membuat Dan Memasang Iklan Seperti 'Google Adsense'

Tentu anda sering menjumpai blog yang menggunakan iklan pada blognya yang mirip seperti google adsense. Untuk membuat iklan pada sebuah blog dengan menggunakan gaya yang layaknya seperti google adsense di blog bisa dilakukan dengan sangat mudah.

Jika blog anda sudah pernah di daftarkan ke google adsense namun belum juga di approve maka sebagai gantinya ini bisa menjadi solusi yang efektif apabila anda ingin memasang iklan pada sidebar maupun bagian lainnya pada blog anda. Sangat mudah bukan, tanpa perlu mendaftarkan blog ke google adsense dahulu namun bisa memasang iklan di blog yang mirip seperti google adsense tanpa harus menunggu di approve terlebih dahulu.

Inilah letak kreatif blogger dimana perjuangannya untuk mendaftarkan blog ke google adsense namun selalu gagal. Walaupun demikian masih juga memaksa untuk memasang iklan yang seperti google adsense walau tanpa mendapat bayaran dan hanya sekedar tiruan belaka.

Oleh sebab itu saya sarankan jika ingin memasang iklan di blog tidak harus menggunakan google adsense jika terlalu lama menunggu approve, namun berikut adalah tutorial Cara Membuat Iklan Seperti Google Adsense.

1. Login ke akun blogger.
2. Copy kode dibawah ini.

<div style="font: 11px verdana; border: 1px solid blue; color: black; background-color:white; padding: 10px; width:250px; height:280px;">
<a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;">
<strong> Faceblog Evolutions </strong></a><br/>
Tutorial Blog | SEO | HTML | CSS | jQuery <br/>
<a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;">
http://mas-andes.blogspot.com </a><br/><br/>

<a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;">
<strong> Faceblog Evolutions </strong></a><br/>
Tutorial Blog | SEO | HTML | CSS | jQuery <br/>
<a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;">
http://mas-andes.blogspot.com </a><br/><br/>

<a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;">
<strong> Faceblog Evolutions </strong></a><br/>
Tutorial Blog | SEO | HTML | CSS | jQuery <br/>
<a href="#" target="_blank" style="color:green;">
http://mas-andes.blogspot.com </a><br/><br/>

<a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;">
<strong> Faceblog Evolutions </strong></a><br/>
Tutorial Blog | SEO | HTML | CSS | jQuery <br/>
<a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;">
http://mas-andes.blogspot.com </a><br/><br/>

<a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;">
<strong> Faceblog Evolutions </strong></a><br/>
Tutorial Blog | SEO | HTML | CSS | jQuery <br/>
<a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;">
http://mas-andes.blogspot.com </a><br/><br/>

<small style="float:right; color:blue;"><strong><a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" style="color:blue;">
Ads by </a>Faceblog Evolutions</strong></small>
</div>

3. Kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut.

Jika ingin membuat iklan tersebut bisa melayang disisi kanan blog maka gunakan kode dibawah ini:

<style type="text/css">
#melayang{
position:fixed;
top:10px;
z-index:+1000;
}
html #melayang{position:relative;}
.melayangcontent{
float:right;
border:2px solid #52e052;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var melayang = document.getElementById("melayang");
var w = melayang.offsetWidth;
melayang.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
melayang.opened = !melayang.opened;
}
function moveGB(x0, xf){
var melayang = document.getElementById("melayang");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
melayang.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="melayang">
<div class="melayangtab" onclick="showHideGB()"> </div>
<div class="melayangcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>

PASTE KODE YANG TADI TARUH DISINI

<script type="text/javascript">
var melayang = document.getElementById("melayang");
melayang.style.center = (30-melayang.offsetWidth).toString() + "px";
</script></center></div></div>

4. Terakhir silahkan anda sesuaikan pada kebutuhan blog dan selera anda.

Terima Kasih www.mas-andes.blogspot.com

Pada contoh di atas saya sisipkan di bagian sidebar dan untuk pengambilan iklan saya mengambil beberapa rekan-rekan blog yang paling sering saya kunjungi dan lain-lain.

8:15 PM

No comments

Ini Dia Tips dan Trik Mempercepat Loading Blog

memang benar bahwa biasanya template blog dengan desain yang di sisipi gambar bervariasi terkadang memiliki tampilan yang elegant dan terlihat cantik. Apalagi jika blog tersebut juga dilengkapi dengan fitur slider, jelas beban loading blog juga akan bertambah ketika terdapat beberapa URL gambar dimasukan kedalam slider tersebut untuk di tampilkan. Namun bagaimana jika gambar yang akan anda upload ke dalam blog memiliki ukuran besar? Bagaimana pula agar gambar tersebut bisa di upload dengan sempurna tanpa mengurangi kualitas gambar? Bukankah jika ukuran gambar di perkecil juga akan berpengaruh terhadap kuliatas gambar, bukankah jernih atau tidaknya suatu gambar tergantung dari ukuran gambar tersebut.

Hal ini perlu di siasati dengan baik agar agar tetap utuh dan tampil maksimal seperti apa yang sudah dikehendaki dari sebelumnya. Namun banyak pula dari beberapa blogger yang seringkali mengabaikan ukuran gambar dan tetap mengupload gambar namun tidak memperhatikan berapa besar size gambar tersebut. Untuk meringankan beban load gambar didalam blog sebenarnya cukup mudah namun memang butuh sedikit waktu untuk melakukannya. Gunakan bantuan software Photoshop untuk mengatur kualitas gambar. Namun pada saat akan menyimpan gambar jangan langsung klik file lalu Save atau Save As, namun gunakan pilihan “Save for Web & Devices” maka disitu akan banyak pilihan tentang format file dan kualitas gambar yang akan anda simpan. Jika anda akan menyimpan menggunakan format JPEG maka dibawahnya akan terdapat opsi kualitas gambar mulai dari low, medium, high, dll. Entah itu format GIF, PNG, dll gunakan opsi kualitas gambar yang sesuai.

Setelah gambar tersebut sudah di simpan, langkah berikutnya adalah mengupload gambar. Anda harus jeli pada saat akan mengupload gambar, perhatikan berapa besar size gambar yang akan di upload dan perhatikan dimana letak gambar tersebut akan ditaruh. Hal ini yang sering di abaikan sebagian blogger, terutama mereka yang menggunakan fitur slider didalam template blognya. Sekarang kita ketahui dimana anda akan menaruh gambar yang anda upload kemudian akan ditampilkannya. Jika gambar tersebut langsung anda upload ke hosting blogspot kemudian akan ditampilkan didalam postingan blog mungkin itu tidak terlalu menjadi masalah pada proses load gambar baik itu gambar berukuran kecil maupun besar. Namun bagaimana bagaimana jika gambar tersebut berukuran besar dan akan di tampilkan kedalam slider blog, apakah gambar tersebut bisa tampil dengan maksimal? Saya rasa tidak! sebut saja gambar tersebut memiliki ukuran lebih dari 80 KB. Jika pada slider terdapat 5 gambar yang ditampilkan dan masing-masing memiliki ukuran rata-rata 80 KB sudah pasti loading blog akan semakin lambat, bahkan masih untung jika gambar tersebut bisa langsung muncul secara cepat.

Sebenarnya masih ada cara yang lebih baik lagi untuk mengupload dan mengambil URL gambar agar bisa tampil secara cepat di blog, terutama pada slider blog maupun seluruh gambar yang anda masukan kedalam template blog. Dengan mengupload gambar ke Picasa Web Album bisa menjadi solusi yang tepat untuk mengatasi proses load gambar. Mengambil URL gambar dari Picasa Web Album akan sedikit lebih membantu speed load blog anda dalam menampilkan gambar secara cepat. Google support merekomendasikan cara ini untuk mengurangi beban load gambar yang terdapat didalam template blog yang anda gunakan, namun banyak juga blogger yang mengabaikan hal ini atau bahkan sebagian ada juga yang belum tahu sama sekali hal ini. Ini baru di lihat dari segi gambar, belum lagi jika ditambah dengan banyaknya kode maupun jumlah widget yang terdapat didalam template blog. Lamanya oading blog juga dapat dipengaruhi oleh jumlah posting yang ditampilkan pada halaman utama atau homepage blog anda. Untuk mengatasi hal tersebut anda dapat dengan mudah mengedit jumlah posting yang ditampilkan di halaman utama dari Setelan Pos dan Komentar pada dashboard blog.

Sekarang kita tinjau dari segi CSS, copy seluruh kode CSS yang terdapat didalam template blog kemudian compress kode tersebut. Langkah berikutnya untuk mengetahui seberapa banyak jumlah kode yang error maupun tidak berfungsi didalam template blog silahkan tinjau di jigsaw.w3.org dengan memasukan URL blog anda kemudian klik Check. Maka di situ akan menampilkan seluruh kode yang error atau tidak berfungsi didalam template blog anda. Selanjutnya anda bisa memperbaiki kode tersebut atau bisa juga menghapusnya jika tidak penting. Pada tahap ini sekaligus untuk memastikan template blog bahwa sudah valid CSS3.

Setelah CSS terselesaikan dengan benar, sekarang optimalkan juga fungsi javascript. Browser cenderung memakan waktu lebih lama untuk membaca javascript di banding CSS. Apabila javascript di taruh pada bagian atas template blog maka browser akan terlebih dahulu membaca seluruh javascript yang ada, sedangkan sebelum proses loading tersebut selesai maka elemen lain juga harus menunggu sampai proses tersebut selesaikan baru elemen-elemen lain akan terbaca. Untuk mengatasi hal ini sebaiknya jika terdapat widget yang menggunakan javascript sebaiknya di taruh pada bagian bawah template blog. Namun apabila javascript ingin di muat secara eksternal maka usahakan untuk mengupload file javascript tersebut ke layanan host yang di gunakan secara pribadi dan jika ingin menggunakan layanan yang gratis gunakanlah layanan gratis dari google karena dapat memuat dengan cepat.

Untuk melakukan semua langkah di atas juga butuh waktu dengan cukup menguras tenaga dan perlu ketelatenan. Namun jika yang anda lakukan sudah beres dan terselesaikan dengan rapi maka hasilnya bisa anda rasakan dan tentu bisa tergantikan. Untuk mengetahui speed loading sudah maksimal atau belom, anda bisa meninjau di Google Insights dengan memasukan URL blog anda kemudian klik Analyze.

Terima Kasih www.mas-andes.blogspot.com

5:54 PM

No comments

Cara Menambah Fitur Slider Pada Blog With CSS3

Untuk menambah kelengkapan fitur pada template blog guna mempercantik tampilan maupun memang suka dengan adanya slider pada sebuah blog, mungkin ini bisa menjadi alternatif dan penerapanya untuk yang membutuhkan apabila ingin lebih mengkreasikan blognya. Slider blog memang banyak dikenal dan tidak jauh dari speed loading, namun hal tersebut bisa teratasi tergantung dari slider yang digunakan.

Pada tutorial ini slider hanya berupa sederhana dengan tampilan yang minimalis dan tidak banyak efek digunakan sehingga akan tetap menjaga speed loading pada template blog yang digunakan. Oleh sebab itu pengguna slider juga tidak perlu khawatir akan terganggu pada loading blognya dengan adanya slider yang menempel pada blognya. Untuk menggunakannya terdapat dua pilihan, pada slider pertama terdapat title di sisi kanan thumbnail sedangkan pada slider kedua tidak terdapat title pada thumbnail. Oke langsung saja untuk penerapannya kedalam blog, maka berikut adalah tutorial Cara Menambah Fitur Slider Pada Blog With CSS3:

1. Login ke akun blogger.
2. Copy kode dibawah ini.
SLIDER 1:

<style>
#sliderblog{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#sliderblog ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#sliderblog ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#sliderblog ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#sliderblog ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#sliderblog li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
}
#sliderblog li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#sliderblog li.ui-tabs-selected{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZKBfj3zIoeXL0gOs33pIsvjYAbaayDcuS9QzZpOeNj9mm4N-7H_twoKA_4ChJA7HlyW6I-rSr46TqsDuWvobVynZG2nyBlgCupfsWPMTB-oUf2klyeDwtVoNBGHIppkzj3Ww0remgYuj/w15-h40-no/selected-item.gif') top left no-repeat;
}
#sliderblog ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#sliderblog .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#sliderblog .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7s5xFlWrt5r029RSh4wPYPjkDmdtpsXdFls_Drq0XW8w6h_pbP1aUlqYBhtKC9N9r-8f5WeM4dosBvB3FRSsXHWBp-_fB9mD_qruRvKCFwXnnsir8T4cdcMo5R5mOK4dKf_AgYRlx_OVe/s2/transparent-bg.png');
}
#sliderblog .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#sliderblog .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#sliderblog .info a{
text-decoration:none;
color:#fff;
}
#sliderblog .info a:hover{
text-decoration:underline;
}
#sliderblog .ui-tabs-hide{
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sliderblog > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

<div id="sliderblog" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggZA_72z8nPA2epzDafZRb61NxxcFXRAOElmctwqf-ozh01heEcl1TxMsHk6HB6-4MppO6f4mDQTQtHzcvEO8yrJUrEHecjVnj_ituZyYsOxHMPyO5VW2O1lIOnPyKFGShXAdFUY6_cXnE/w80-h50-no/Faceblog+Evolutions+Small+%25281%2529.jpg" alt="" /><span>Faceblog Evolutions</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGrSkCft3GVQeP0K_kyO5SqXUrYGhqvGauo2FLsmWSKKo1PzKDmpyuW6hcyGAFenDNXVws8NcJijSTM9jgciTaRE7yh3EKcORFKKL_ktPibr7Jq_wmRwk99uSsHzyH3Z9ki80qOG37bj9W/w80-h50-no/Faceblog+Evolutions+Small+%25282%2529.jpg" alt="" /><span>Membuat Iklan Seperti Google Adsense</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNGBGdO3JXcYmvrrh1kXwBUNaGsk0OB2CR2lYkE3MZErZGPU_vz8Km-KbapOqyUnj6_WqZ5dLVdKZj8fQOGAy3Z5f9PGIcbUXQI-t18nXG_pmbIBKvlc1K3SS4rvPAGvHVtNV_WSugCqH/w80-h50-no/Faceblog+Evolutions+Small+%25283%2529.jpg" alt="" /><span>Optimasi Meta Tag SEO Valid HTML5</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjENFYcTRxy2qDDOrcSJsOnZJYVGqo3lJ57AS-OZsp9CogwQqWWa9CvzyK7uXr2iNDMPsZcrjpApq4gLrRu-SQLvLP5V5A5LCqD-jD3FoqLhRTReeLLn650mQFQ7gZoQe9-nFl_dvdxkVfs/w80-h50-no/Faceblog+Evolutions+Small+%25284%2529.jpg" alt="" /><span>Membuat Sidebar Blog Efek Ribbon</span></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVehwINBID_QCq3STZaV68tnp8ImtrlccK1BJuXbp1YDgX_3ShlMSxQ3p8Jujv4_Cggn2PnIeQncEoayi2Hlgk1jJP_WaXR_oG-ppLDYh6H8W8rYQVgdOhS6Oi22MUe25izf4NNga8Qo6/w400-h250-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com" >Faceblog Evolutions</a></h2>
<p>http://mas-andes.blogspot.com - Tutorial Blog | SEO | HTML | CSS | jQuery....<a href="http://mas-andes.blogspot.com" >read more</a></p>
</div>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MJ7tjnAYthGuzS946swwRMsOCi9qkcElBBW2m9pUYOxuLvIVlSsec_O4D34LeXbUP6APYMsA4BzgD4fh2VlXmklQmbFGeFRXaCHYyA_4YVcMJpbmedhVla5EnhPZjLiNF-6ZpoF2hDKz/w400-h250-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >Membuat Iklan Seperti Google Adsense</a></h2>
<p>Untuk membuat iklan pada sebuah blog dengan menggunakan gaya yang layaknya seperti Google Adsense....<a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >read more</a></p>
</div>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY5VPBPze0hpHt41SZAyuCfH1vvgvzwB8lVg9igkfI7Q6yqoJsyIcvVu2-KREELLFLzK25XZ5KbIHXoun1zmgQVO98WDhmY1CrvnHH8JdRXGQ_Y5xeUSJA9dAmwFcr5gC5W0wtixoewjzz/w400-h250-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >Optimasi Meta Tag SEO Valid HTML5</a></h2>
<p>Dalam sebuah blog fungsi meta tag tentu sangat penting dan diperlukan untuk lebih memaksimalkan potensi SEO....<a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >read more</a></p>
</div>
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFV3rR8M8EvHDRHhZwaOy5kGQf4A6wW1XcYnse4tu34kNwa7nDklfRnmRGMixLbWmqslxJ1XZSK0fZhLjawuvDob-gZ_8oDR_A6ULlfdUhhHtT4a0Jg4e3QNGbpQlaFhpX9_pU1SI3dHg/w400-h250-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >Membuat Sidebar Blog Efek Ribbon</a></h2>
<p>Tutorial cara membuat sidebar pada blog anda agar lebih elegant dengan tampilan efek ribbon yang cantik....<a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >read more</a></p>
</div>
</div>
</div>

SLIDER 2:

<style>
#sliderblog{
width:400px;
padding-right:115px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#sliderblog ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:115px;
}
#sliderblog ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#sliderblog ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#sliderblog ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#sliderblog li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
}
#sliderblog li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#sliderblog li.ui-tabs-selected{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZKBfj3zIoeXL0gOs33pIsvjYAbaayDcuS9QzZpOeNj9mm4N-7H_twoKA_4ChJA7HlyW6I-rSr46TqsDuWvobVynZG2nyBlgCupfsWPMTB-oUf2klyeDwtVoNBGHIppkzj3Ww0remgYuj/w15-h40-no/selected-item.gif') top left no-repeat;
}
#sliderblog ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#sliderblog .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#sliderblog .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7s5xFlWrt5r029RSh4wPYPjkDmdtpsXdFls_Drq0XW8w6h_pbP1aUlqYBhtKC9N9r-8f5WeM4dosBvB3FRSsXHWBp-_fB9mD_qruRvKCFwXnnsir8T4cdcMo5R5mOK4dKf_AgYRlx_OVe/s2/transparent-bg.png');
}
#sliderblog .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#sliderblog .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#sliderblog .info a{
text-decoration:none;
color:#fff;
}
#sliderblog .info a:hover{
text-decoration:underline;
}
#sliderblog .ui-tabs-hide{
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sliderblog > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

<div id="sliderblog" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggZA_72z8nPA2epzDafZRb61NxxcFXRAOElmctwqf-ozh01heEcl1TxMsHk6HB6-4MppO6f4mDQTQtHzcvEO8yrJUrEHecjVnj_ituZyYsOxHMPyO5VW2O1lIOnPyKFGShXAdFUY6_cXnE/w80-h50-no/Faceblog+Evolutions+Small+%25281%2529.jpg" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGrSkCft3GVQeP0K_kyO5SqXUrYGhqvGauo2FLsmWSKKo1PzKDmpyuW6hcyGAFenDNXVws8NcJijSTM9jgciTaRE7yh3EKcORFKKL_ktPibr7Jq_wmRwk99uSsHzyH3Z9ki80qOG37bj9W/w80-h50-no/Faceblog+Evolutions+Small+%25282%2529.jpg" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNGBGdO3JXcYmvrrh1kXwBUNaGsk0OB2CR2lYkE3MZErZGPU_vz8Km-KbapOqyUnj6_WqZ5dLVdKZj8fQOGAy3Z5f9PGIcbUXQI-t18nXG_pmbIBKvlc1K3SS4rvPAGvHVtNV_WSugCqH/w80-h50-no/Faceblog+Evolutions+Small+%25283%2529.jpg" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjENFYcTRxy2qDDOrcSJsOnZJYVGqo3lJ57AS-OZsp9CogwQqWWa9CvzyK7uXr2iNDMPsZcrjpApq4gLrRu-SQLvLP5V5A5LCqD-jD3FoqLhRTReeLLn650mQFQ7gZoQe9-nFl_dvdxkVfs/w80-h50-no/Faceblog+Evolutions+Small+%25284%2529.jpg" alt="" /></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVehwINBID_QCq3STZaV68tnp8ImtrlccK1BJuXbp1YDgX_3ShlMSxQ3p8Jujv4_Cggn2PnIeQncEoayi2Hlgk1jJP_WaXR_oG-ppLDYh6H8W8rYQVgdOhS6Oi22MUe25izf4NNga8Qo6/w400-h250-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com" >Faceblog Evolutions</a></h2>
<p>http://mas-andes.blogspot.com - Tutorial Blog | SEO | HTML | CSS | jQuery....<a href="http://mas-andes.blogspot.com" >read more</a></p>
</div>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MJ7tjnAYthGuzS946swwRMsOCi9qkcElBBW2m9pUYOxuLvIVlSsec_O4D34LeXbUP6APYMsA4BzgD4fh2VlXmklQmbFGeFRXaCHYyA_4YVcMJpbmedhVla5EnhPZjLiNF-6ZpoF2hDKz/w400-h250-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >Membuat Iklan Seperti Google Adsense</a></h2>
<p>Untuk membuat iklan pada sebuah blog dengan menggunakan gaya yang layaknya seperti Google Adsense....<a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >read more</a></p>
</div>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY5VPBPze0hpHt41SZAyuCfH1vvgvzwB8lVg9igkfI7Q6yqoJsyIcvVu2-KREELLFLzK25XZ5KbIHXoun1zmgQVO98WDhmY1CrvnHH8JdRXGQ_Y5xeUSJA9dAmwFcr5gC5W0wtixoewjzz/w400-h250-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >Optimasi Meta Tag SEO Valid HTML5</a></h2>
<p>Dalam sebuah blog fungsi meta tag tentu sangat penting dan diperlukan untuk lebih memaksimalkan potensi SEO....<a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >read more</a></p>
</div>
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFV3rR8M8EvHDRHhZwaOy5kGQf4A6wW1XcYnse4tu34kNwa7nDklfRnmRGMixLbWmqslxJ1XZSK0fZhLjawuvDob-gZ_8oDR_A6ULlfdUhhHtT4a0Jg4e3QNGbpQlaFhpX9_pU1SI3dHg/w400-h250-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >Membuat Sidebar Blog Efek Ribbon</a></h2>
<p>Tutorial cara membuat sidebar pada blog anda agar lebih elegant dengan tampilan efek ribbon yang cantik....<a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >read more</a></p>
</div>
</div>
</div>

Keterangan:
Untuk width dan height maupun URL gambar silahkan anda sesuikan selera.

3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian Simpan dan lihat hasilnya.

Terima Kasih www.mas-andes.blogspot.com

5:51 PM

No comments

List Icon Font Awesome dan CSS Value Content V4.0.3

Pada artikel ini bagi yang suka bermain main dengan desain blog maka pilihan tepat sekali untuk menambah pernak-pernik pada elemen-elemen tertentu hingga sampai yang mendetail dengan menggunakan Font Awesome untuk melengkapi maupun mempercantik blog. Font Awesome versi 4.0.3 merupakan update dari versi sebelumnya, dan terdapat 11 icon baru pada Font Awesome V4.0.3 dan juga pembaharuan nama icon. Font Awesome merupakan font web yang mengagumkan dan mengandung semua ikon dari kerangka Twitter Bootstrap, dan sekarang lebih banyak lagi icon-icon lain hanya dengan menambah satu styleshet pada template maka anda bisa menggunakan 369 icon.

Agar bisa menggunakan Font Awesome, maka anda perlu menambahkan styleshet dibawah ini kemudian menyimpannya di atas kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Cara penggunaanya didalam HTML anda hanya perlu menambahkan tag <i> kemudian class dari nama icon yang dipilih. Misal untuk cara penulisannya seperti dibawah ini:

<i class="fa fa-html5"></i> fa-html5

Untuk memperbesar ukuran, maka anda hanya perlu menambahkan class fa-lg, fa-1x, fa-2x, fa-3x,fa-4x, fa-5x dan berikut contohnya:

<p><i class="fa fa-html5 fa-lg"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-2x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-3x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-4x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-5x"></i> fa-html5</p>

Gunakan class fa-ul dan fa-li untuk mempermudah dalam membuat daftar list dan menentukan nama icon.

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>fa-check-square</li>
  <li><i class="fa-li fa fa-check-square"></i>fa-check-square</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>fa-spinner fa-spin</li>
  <li><i class="fa-li fa fa-square"></i>fa-square</li>
</ul>

Gunakan class pull-right atau pull-left untuk membuat icon berada di sebelah kanan atau sebelah kiri, sedangkan fa-border adalah untuk membuat border pada icon tersebut.

" Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right. "

<i class="fa fa-info-circle fa-2x pull-left fa-border"></i>
Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right.

Gunakan class fa-spin untuk membuat icon agar bisa berputar. Ini biasa di kombinasikan pada icon fa-spinner, fa-refresh, dan fa-gigi agar bisa berputar dengan baik. Namun sayangnya animasi CSS3 ini tidak support di IE8 - IE9.

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

Untuk memutar atau membalik icon, gunakan class fa-rotate-* dan fa-flip-*. Ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di rotate.

<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical

Diatas adalah cara dimana untuk menuliskan Font Awesome didalam sebuah markup HTML, masih banyak lagi tips trik lainnya yang bisa digunakan didalam Font Awesome. Untuk lebih jelasnya bisa mencoba dan berkreasi sendiri agar bisa lebih memahami bermain-main dengan berbagai komponen Bootstrap. Bahkan dengan cara lain anda juga bisa untuk menambahkan icon Font Awesome didalam CSS pada pseudo elemen :before dengan menuliskan value content dari icon tersebut. Berikut skema penggunaan Font Awesome pada pseudo elemen CSS:

.element{
    position: relative;
}
/* ganti tulisan berwarna merah pada value content */ 
.element:before {
    content: "\f000"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--custom pada CSS--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Setelah mengetahui cara penggunaan dari Font Awesome baik itu pada CSS maupun HTML maka berikut adalah list dari icon Font Awesome versi 4.0.3 beserta CSS value content.