Demo Efek Transisi Gambar Untuk Blogger Dengan CSS

Dibawah adalah demo efek transisi gambar untuk Blogger dengan CSS. Silahkan arahkan cursor (hover) pada gambar dan lihat apa yang terjadi...

Read More

Efek Transisi Gambar Untuk Blogger dengan CSS

Apakah anda adalah seorang blogger yang sedang menawarkan space iklan di blog anda? atau anda adalah seorang penjual untuk sebuah produk di blog anda? maka cara ini mungkin dapat meningkatkan jumlah klik untuk iklan anda. Dengan memberi efek transisi seperti terkupas ini maka anda akan memberi kesan unik untuk space iklan anda. Berikut demo dan tutorialnya.

Sedangkan Demo nya bisa anda lihat disini

Adapun caranya seperti berikut :

1. Masuk ke akun blogger, lalu klik Layout - Add Gadget - HTML/Javascript


2. Lalu masukkan kode berikut:



<style type="text/css">

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 450px; 
height: 300px; 
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease; 
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}


a.nowandthen img:nth-of-type(2){ 
z-index: 1;
}


a.nowandthen:hover img:nth-of-type(1){ 
clip: rect(0,0,434px,0); 
opacity: 0;
}

</style>

<a class="nowandthen" href="http://azumacorner.blogspot.com/">
 <img alt="" src="http://1.bp.blogspot.com/-5cpkCPis1x8/UbArJF1PBuI/AAAAAAAAFhM/3leauMiv55I/s1600/pasang+iklan1.jpg" />
 <img alt="" src="http://4.bp.blogspot.com/-4-qBBKX6RjU/UbArHndd3kI/AAAAAAAAFhE/2qYdFWdwQbY/s1600/pasang+iklan2.jpg" />
</a>



3. Silahkan edit URL gambar dengan gambar yang anda inginkan. Untuk mengubah ukuran, silahkan edit angka width dan height

Demikian informasi cara membuat Efek Transisi Gambar Untuk Blogger dengan CSS. Semoga bermanfaat.

Read More

Widget Artikel Terbaru dengan Desain Atraktif Blogger

Widget ini membantu pembaca blog anda untuk menemukan artikel terbaru dari blog anda. Dengan widget ini, tentunya meningkatkan daya jelajah pembaca anda yang kemungkinan berasal dari Search Engine. desainnya yang atraktif juga membuat widget ini semakin menarik. Namun, kembali lagi, anda harus bijak menggunakan banyak widget karena akan membuat blog anda semakin berat. Jadi semua tergantung kepada anda. Berikut demo dan tutorialnya di bawah!

1. Masuk ke akun blogger, lalu klik Layout - Add Gadget - HTML/Javascript


2. Lalu masukkan kode berikut:



/* bloogtrik - new article widget */<script type='text/javascript'>
//<![CDATA[
var numfeed = 4; 
var startfeed = 0;
var urlblog = "http://nama_blog_anda.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;

function akaUTkolisfeed(ir,banget){
var showfeed = ir.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj_JUoZYzfqK3X2OMuKEKVCjK8vzFC29CB_c0tBBBSbJqaaZlgDo2ybYlPpcSsAlu3tOg9eEX453WiohOUYngPSY7Zhm4yaAs-F3UEKheRGe1iPGx_Eug1lAzVwt5B20R9JBImvTpsKiM/s1600/no+image.jpg";
}
showblogfeed += "<div class='akaUT-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + akaUTkolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("akaterbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("akaUT-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("akaterbaru").innerHTML = "<div id='akaUT-loading'></div>";
document.getElementById("akaUT-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var akaterbaru = document.createElement('script');
akaterbaru.setAttribute('type', 'text/javascript');
akaterbaru.setAttribute('src', archievefeed);
akaterbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(akaterbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="akaterbaru"></div>
<div id="akaUT-navigasifeed"></div>
<style>
#aka-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#akaterbaru{margin:0px}
.akaUT-elemen{background-color:#fff;border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.akaUT-elemen img{background:#eee;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.akaUT-elemen h6,.akaUT-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.akaUT-elemen:hover{background-color:#ecf3fb}
.akaUT-elemen p{text-align:justify;color:#555;line-height:14px;margin:5px 0}
#akaUT-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#ffffff url(http://www.westmarine.com/wcsstore/MadisonsStorefrontAssetStore/images/colors/color1/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#akaUT-navigasifeed{background-color:#fff;border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#akaUT-navigasifeed:hover{background-color:#ecf3fb}
#akaUT-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#akaUT-navigasifeed span{padding:5px 10px}
#akaUT-navigasifeed .next{float:right}
#akaUT-navigasifeed .previous{float:left}
#akaUT-navigasifeed .home{text-align:center}
#akaUT-navigasifeed a:hover,#akaUT-navigasifeed span.noactived{color:transparant!important}
</style>



3. Silahkan edit seperlunya: 


• Ganti nilai var numfeed untuk menentukan jumlah artikel yang akan di tampilkan.


• Ganti URL var urlblog dengan URL blog anda.

Demikian informasi tentang Widget Artikel Terbaru dengan Desain Atraktif Blogger semoga bermanfaat

Read More

Menghapus Widget yang Bermasalah

Tentunya kita semua ingin mempunyai blog yang indah, ringan dan keren bukan ?. Dengan demikian kita juga tentu tidak lepas dari penggantian template dari hasil download.
Nah pasti sobat yang sering berganti ganti template tentu akan menemui bahwa ada widget yang tidak bisa dihapus dan menyebalkan bukan ?. Saya pernah mengalaminya seperti yang terjadi pada sobat kali ini. Dan Saya akan jelaskan seperti dibawah.


Misalnya saja nama widget yang tertinggal adalah "attribution" yang bertipe feed seperti gambar di bawah :

Nah cara untuk menghapus widget tersebut adalah sobat cari script code seperti di bawah ini ( gunakan fungsi Ctrl+F pada keyboard anda ) :

<b:widget id='Feed2' locked='false' title='Attribution' type='Feed'><b:includable id='main'><h2><data:title/></h2><div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'><span style='filter: alpha(25); opacity: 0.25;'><a expr:href='data:feedUrl'><data:loadingMsg/></a></span></div><b:include name='quickedit'/></b:includable></b:widget>

Setelah ketemu silahkan sobat delete saja dan click save templates,
Jika script yang sobat hapus benar untuk widget yang di maksud tadi maka akan ada tampilan seperti di bawah ini :

 

Nah jika sudah ada tampilan seperti di atas berarti widget yang anda hapus adalah benar dan click saja 'hapus widget' tersebut, silahkan lihat ke menu tata letak sobat pasti telah terhapus.

Demikian saja postingan singkat Cara Menghapus Widget Bermasalah, Semoga bermanfaat....

Read More

Optimasi SEO Onpage Blog

Sobat belajar menjadi blogger, faktor penting untuk membuat, membangun atau mengoptimalkan sebuah blog atau website terdiri dari 2 faktor yaitu SEO Onpage Optimization dan SEO Off page Optimization. Dalam bahasa indonesia kita dapat menerjemahkannya menjadi optimasi dalam halaman SEO dan optimasi luar halaman SEO begitu kira kira. Artikel kali ini saya  akan menfokuskan untuk membahas beberapa faktor penting dalam SEO Onpage saja, untuk yang SEO Offpage dilain kesempatan.


Faktor penting dalam optimasi SEO On page suatu blog adalah terdiri dari :

1. Judul Posting
    Sobat blogger buatlah judul postingan yang sedang trend atau sedang ramai dibicarakan, gunakan keyword yang unik ataupun longtail keyword. Anda bisa membaca artikel cara memilih keyword jika anda ingin mengetahui lebih cara memilih judul postingan.


2. Gunakan Tag artikel
    Jangan lupa setting tag artikel anda dengan baik , misalnya saja H1 untuk judul blog, H2 Judul artikel, H3 untuk bagian arsip, ataupun untuk widget yang lain. Yang terpenting adalah H1 dan H2 yang harus lebih difokuskan.


3. Pencantuman Deskripsi artikel
    Saat ini google lebih mengutamakan deskripsi suatu blog untuk membantu mesin pencari untuk menemukan artikel artikel anda, Keyword lebih dikhususkan ke blog yang berisi artikel yang 'gado gado'. Jadi anda harus rajin mengisi deskripsi untuk setiap membuat artikel baru supaya artikel anda lebih muda terdeteksi oleh mesin pencari. Pastikan tidak ada deskripsi yang sama dalam setiap deskripsi yang anda buat, jika anda tidak ingin mendapat meta ganda deskripsi.


4. Kata kunci / keyword
     Untuk membantu membangkitkan keperkasaan artikel anda oleh mesin pencari, anda dapat menandai kata kata yang anda anggap keyword dengan lebih menebalkan kata kata tersebut. Sehingga tekan tekanan tersebut memberi tanda kepada mesin pencari bahwa kata tersebut merupakan sesuatu yang penting.  Jangan mengulang kata kata yang dianggap sebagai kata kunci terlalu banyak. Memang tidak ada batasan yang pasti untuk kata yang kita anggap kata kunci tersebut, sebaiknya lakukan pengulangan hanya berkisar 4-5 kali saja dalam suatu artikel.


5. Gunakan template yang SEO friendly
    Penggunaan template SEO friendly dapat anda cari dengan mensearch di mesin pencari anda, Silahkan download dan gunakan pada blog kesayangan anda. Tetap ingat jangan terlalu sering dalam penggantian template, Jika terlalu sering maka tidak menutup kemungkinan widget anda akan rusak dan template anda akan kacau balau.


6. Feedburner
   Daftarkanlah blog kesayangan anda ke feedburner, anda dapat membacanya di artikel cara mendaftar feedburner


7. Link bocor
    Usahakan tidak memasang link menuju blog lain jika tidak benar benar diperlukan, karena akan terjadi kebocoran link yang menyebabkan blog anda menjadi 'keropos'.


8. Link balik
    Letakan link yang menuju homepage anda yang mengandung kata kunci utama dari blog anda pada bagian akhir template anda.
Jikalau anda menggunakan gambar, sebaiknya menggunakan alt tag untuk membantu keyword anda misalnya saja <img src="http://alamatblog.com/image/ayam.png" alt="gambar ayam">


9. Tata letak template

Yang tidak kalah penting dalam SEO Onpage blog adalah tata letak template, pilihlah template yang meletakkan artikel di bagian kiri dan sidebar di bagian kanan.

Sekian dulu artikel singkat kali ini, semoga artikel Cara optimasi SEO Onpage blog dapat bermanfaat.

Read More

Cara Memilih Kata Kunci (Keyword) yang Tepat dan Menggunakan Adwords google

Seperti yang kita ketahui bahwa Memilih Kata Kunci (keyword) dalam suatu blog atau web sangatlah penting. Dikatakan penting karena kata kunci (keyword) mencakup penentuan alur hidup atau urat nadi dari suatu blog. Sehingga kita harus berhati hati dalam memilih kata kunci (keyword) agar mendapat respon yang baik dari search engine.


Jadi kita mau tidak mau suka tidak suka kita tetap harus tahu cara memilih kata kunci (keyword) yang tepat untuk blog kita.
Google tentunya sudah mempertimbangkan permasalahan ini, dan dengan bijaksana google pun menyediakan alat untuk membantu kita untuk lebih memudahkan kita memilih kata kunci / keyword tersebut . Silahkan saja anda mengunjungi link webnya berikut : www.adwords.google.com/keywordtool Dari sini kita dapat melihat keyword keyword yang ada, berikut langkah selanjutnya :

1. Silahkan anda mengisi tempat yang bertuliskan "word or phrase " isilah kata kata kunci yang ingin anda lihat , sebagai contoh ketik "membuat blog"
2. Masukkan kategori blog anda
3. Persempit ruang pencarian dengan mengisi lokasi dan bahasa.
4. Isi verifikasi captcha
5. Klik Search

Dari sini kita dapat melihat kata kunci (keyword) dari adwords google yang banyak dicari orang lain, upayakanlah keyword yang agak panjang dan tingkat persaingannya tidak tinggi. Dan buat blog yang masih kategori baru disarankan agar memilih kata kunci / keyword yang agak panjang. Karena kata kunci atau keyword yang pendek memerlukan persaingan yang sangat ketat yang biasanya dimenangkan oleh blog yang sudah lama eksis di dunia blog dan cukup berumur.
Anda bisa meng-klik "show more like this" untuk mendapatkan kata kunci / keyword yang lebih panjang dari sebelumnya misalnya seperti gambar di bawah ini.

Dan sekarang anda sudah lebih siap dalam menentukan kata kunci (keyword) untuk blog atau web anda, semoga artikel  Bagaimana Cara memilih kata kunci (keyword) yang tepat dan benar menggunakan adwords google dapat membantu anda dalam menentukan judul artikel anda.

Read More

Widget 3 Tab Untuk Blogger

Dengan bantuan widget ini, anda dapat memadukan banyak fitur dalam blog anda kedalam 1 tempat saja. Hal ini tentu saja menjadi sangat menarik karena membuat tampilan blog anda menjadi semakin dinamis dan profesional. Beriku demo dan tutorialnya.

1. Masuk ke akun blogger, lalu klik Template - Edit HTML


2. Temukan kode </head>, gunakan Ctrl+F untuk mempermudah pencarian


3. Masukkan kode berikut sebelum kode </head> tadi



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
    $(document).ready(function() {
        $("#tabs").tabs();
    });
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />



4. Lalu masuk Layout - Add Gadget - HTML/Javascript dan masukkan kode berikut:



<div id="tabs">
<ul><li>
<a href="#tabs-1">Tab-1</a></li><li>
<a href="#tabs-2">Tab-2</a></li><li>
<a href="#tabs-3">Tab-3</a></li></ul>
<div id="tabs-1">Script atau teks disini</div>
<div id="tabs-2">Script atau teks disini</div>
<div id="tabs-3">Script atau teks disini</div>



5. Edit kode warna merah dengan script yang anda inginkan dan kode biru adalah judul Tab


6. Simpan HTML dan lihat hasilnya pada View Blog

Read More