Cara Mengganti Gambar Kursor di Blog

Cara Mengganti Gambar Kursor di Blog - Berbicara tentang Cara Mengganti Gambar Kursor di Blog sebenarnya sangat lah mudah sekali, Gara-gara kepingin sekali mengganti gambar kursor di blog ini, akhirnya setelah googling kesana kemari nemu juga sebuah situs yang menyediakan banyak gambar-gambar kursor pilihan. Gambar kursor yang disediakan situs penyedia gambar ini http://www.totallyfreecursors.com/ banyak sekali, jadi kita tinggal memilih sesuai selera aja. Untuk cara memasang gambar kursor ini di blog, kita harus menambahkan sedikit saja kode CSS supaya bisa dipasang pada template. Dibawah ini ada beberapa sample gambar untuk kursor yang saya ambil berikut URL alamat kursor tersebut.

URL : http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/tail2.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/banana1.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif

Cara mengganti gambar kursor di blog :

1. Login ke dashboard blogger anda.
2. Pilih Rancangan > Edit HTML, centang Expand widget template.
3. Carilah kode pada template anda dengan menggunakan Ctrl F.
4. Copy kode CSS dibawah ini dan letakkan tepat diatas kode .</head>
<style type='text/css'> HTML,BODY{cursor: url(&quot;http://downloads.totallyfreecursors.com/thumbnails/sweden.gif&quot;), auto;} </style>
5. Simpan template anda dan lihat perubahan pada gambar kursor
6. Jika sobat ingin mengganti gambar kursor dengan gambar yang lain, sobat tinggal ganti URL gambar yang berwarna merah dengan URL gambar pada sample diatas atau sobat bisa langsung browsing sendiri ke TKP di http://www.totallyfreecursors.com/ .

Nah ternyata mengganti gambar kursor di blog memang bisa jadi solusi mempercantik tampilan blog juga ya apalagi kalo ditambahin lagi dengan efek bintang siip dah. Tinggal giliran sobat blogger nih, selamat mencoba Cara Mengganti Gambar Kursor di Blog ini rating 5

Read more »

Cara Mudah Instal Memasang Plugin Contact Form 7

Cara Mudah Instal Memasang Plugin Contact Form 7 - Bagi Pengguna wordpress dimudahkan dengan adanya plugin, begitu juga jika kalian ingin menambahkan form kontak pada blog wordpress kalian. Dengan plugin Contact Form 7 kalian bisa dengan mudah membuat form contact us. Tau kan untung dan ruginya kalau blog wordpress mempunyai form atau page contact us, kalau blog kalian bagus baik dari content maupun trafficnya jika ada advertiser yang ingin pasang iklan di blog kamu akan mudah menghubungi kamu selaku pemilik blog tersebut.

Lalu bagaimana cara install dan cara memasang Plugin Contact Form 7 di blog wordpress kita ? Mudah kamu bisa download dan install plugin Contact Form 7 dari pencarian plugin di dashboard blog kamu atau melalui link ini. Setelah benar-benar sudah terpasang jangan lupa untuk diaktifkan.

Selanjutnya kita akan mensetting Plugin Contact Form 7 agar dapat bekerja dengan sesuai yang diharapkan. Untuk pengaturan plugin Contact Form 7, tinggal klik Contact yang berada di sidebar kiri. Untuk pengaturannya saya biarkan default, namun bisa anda rubah sesuai dengan kebutuhan.

Klik edit seperti gambar diatas, kemudian akan muncul seperti ini dan samakan settingannya 

Jika kaliian sudah membuat seperti yang diatas, maka kalaian buat page atau halaman di blog kalian. Selanjutnya copy script yang nantinya akan menampilan seperti form bawah ini

Nama(wajib)

Email(wajib)

Situs web

Pesan

 

untuk codenya

contact-form 1 “Contact form 1″)

ganti tanda = dengan [ dan tanda ) dengan ]

Kemudian paste kan di page yang sudah kamu siapkan untuk membuat form kontak. Untuk pastenya kamu harus memilih opsi yang HTML.

Setelah itu jangan lupa untuk di save dan lihat hasilnya, selamat mencoba

rating 5

Read more »

Tips Mudah Cara Membuat Iklan Melayang pada WordPress

Tips Mudah Cara Membuat Iklan Melayang pada WorPdress - penjelasan ini merupakan jawaban dari pertanyaan guru olahraga yang bingung menerapkan teknik cara membuat iklan melayang dengan tombol close sebelumnya. kwk apa hubungannya sama guru olah raga? Sebenarnya code script nya sama saja, tapi di teknik sebelumnya hanya saya fokuskan pada Blogspot, lalu bagaimana caraanya untuk ditempatkan pada WordPress ??

Oke kita flash back dulu ke teknik cara membuat iklan melayang dengan tombol close sebelumnya, copas saja codenya lalu terserah anda mau menempatkan iklan itu dimana. Apakah mau di tempatkan di Main Index (home) , atau di Single Post (di artikel). Atau ke dua-duanya

Ini dia code / script yang nantinya Anda gunakan sebagai pemanggil

<style type=”text/css”>
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type=”text/javascript”>
function showHideGB(){
var gb = document.getElementById(“gb”);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById(“gb”);
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + “px”;
if(x0!=xf){setTimeout(“moveGB(“+x+”, “+xf+”)”, 10);}
}
</script>

<div id=”gb”>

<div onclick=”showHideGB()”> </div>

<div>

<div style=”text-align:right”>
<a href=”javascript:showHideGB()”>
.:[Close][Klik 2x]:.
</a>
</div>
<center>

DISINILAH ANDA MELETAKAN KODE SCRIPT IKLAN ANDA

</center>

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

Tempatkan code diatas setelah code <?php get_header(); ?> , selamat mencoba moga sukses sob

rating 4.5

Read more »

Cara Mengatur Jarak Kotak Komentar Dengan Footer Blogger

Cara Mengatur Jarak Kotak Komentar Dengan Footer Blogger - kali ini saya ingin menjelaskan tentang Cara Mengatur Jarak Kotak Komentar Dengan Footer Blogger, dan Mungkin cara untuk mengedit template blogger kali ini akan sangat berguna bagi kamu yang suka ngeblog dengan blogspot. Ya.. trik Cara Mengatur Jarak Kotak Komentar Dengan Footer Blogger adalah salah satu tik dasar untuk membuat tampilan template kita lebih rapi. Sering kali kita mendapatkan template blogspot yang jarak antara kotak komentar dengan footer terlalu jauh dan kerena terlalu jauhnya footer blog kita tidak terlihat oleh pengunjung.

Oleh karena itu saya berikan cara mengatur/ merubah jarak spasi di Bawah kotak komentar agar terlihat lebih dekat.

Login Blogger
Klik Rancangan atau Design
pilih tab Edit HTML
centang Expand Widget Templates
Cari kode dibawah ini dengan menekan keypad ctlr+F yang mirip sebagai berikut :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Ganti jumlah pada height sesuai keinginan Anda (aku menggantinya dengan jumlah 200 atau sesuai dengan yang kamu inginkan) dan Jika sudah di ganti, klik tombol Simpan Template, dan lihat hasil nya

oke cukup sampai disini Cara Mengatur Jarak Kotak Komentar Dengan Footer Blogger
rating 4.5

Read more »

Cara Mengganti Background Blog dengan Gambar

Cara Mengganti Background Blog dengan Gambar - pembahasan kali ini tentang Cara Mengganti Background Blog dengan Gambar, dan Berikut ini langkah-langkah cara mengatur background gambar berada pada tempatnya di blogspot.

Login ke blogger
Rancangan
Edit HTML
Disini kita mengambil contoh pada background body di tamplate blog kita, cari kode body {
Nah di sana terdapat kode background,

body{
background:#ded8c0;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}

Setiap blog rada berbeda sih Backgroundnya, nah untuk mengganti backborund misal dengan background / gambar ini

http://4.bp.blogspot.com/-dNS6cFsK2M4/TuwkW0K4RJI/AAAAAAAAAYk/hsaP92g98TI/s1600/wallpaper.jpg

Maka kalian cukup menambahkan url(http://4.bp.blogspot.com/-dNS6cFsK2M4/TuwkW0K4RJI/AAAAAAAAAYk/hsaP92g98TI/s1600/wallpaper.jpg) repeat-x; pada background tersebut.

Jadi :

body{

background:#ded8c0 url(http://4.bp.blogspot.com/-dNS6cFsK2M4/TuwkW0K4RJI/AAAAAAAAAYk/hsaP92g98TI/s1600/wallpaper.jpg) repeat-x;

color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}

Tips yang lain, Background kamu juga bisa tetap walaupun scroll mouse kamu gerakkan ke atas atau kebawah. Tinggal kamu ganti repeat-x; menjadi repeat-x top left fixed;

Atau yang paling saya suka adalah menggunakan gambar kecil namun bisa menjadi besar dan tetap. Yakni kamu cari dulu gambar kecil, setelah itu seperti biasa, tinggal kamu rubahrepeat-x; menjadi repeat scroll 0 0;

Semoga bermanfaat rating 4.5

Read more »

Cara Membuat Recent Post Model Slide

Cara Membuat Recent Post Model Slide - kali ini saya share tentang Cara Membuat Recent Post Model Slide, Tapi sebelumnya saya akan menjelaskan secara singkat apa itu Recent Post..? Recent Posts adalah widget yang menampilkan beberapa judul posting terbaru, yang bisa anda tampilkan pada sidebar sehingga pengunjung lebih mudah mengetahui posting-posting yang terbaru.

Biasanya recent post hanya menampilkan link judul atau dengan Thumbnail Image. Namun sekarang ada yang sedikit berbeda yaitu recent post dengan Thumbnail Image dengan model Slide Show (bergerak turun).

Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

<style type="text/css">

#rp_plus_img{height:282px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;background-color:none;}

#rp_plus_img ul{list-style-type:none;margin:0;padding:0}

#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}

#rp_plus_img li{height:60px;padding:5px;list-style:none;}

#rp_plus_img a{color:#000;}

#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}

#rp_plus_img .news-text{display:block;font-size:10px;font-weight:normal !important;color:#282828;text-align:justify;}

#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 0px #585858;width:55px;height:55px;}

</style>

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

<script type="text/javascript" src="http://rizki-khaizir.googlecode.com/files/recentpostslidethumbnails.js"></script>

<script type="text/javascript">

var speed = 400;

var pause = 2500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img">

<script style="text/javascript">

var numposts = 25;

var numchars = 75;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul>

5. Klik Simpan
6. Lihat hasilnya.

Keterangan dan Catatan :
Untuk membuat halaman menjadi lebih tinggi, gantilah nilai height:282px sesuai keinginan;
Untuk mengganti kecepatan, rubahlah nilai var speed = 400; sesuai keinginan sobat;
Rubahlah nilai var numposts = 25; untuk menampilkan jumlah postingan;
Rubahlah nilai var numchars = 75; untuk mempilkan jumlah karakter;
Feed sobat harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh" atau sobat bisa langsung masukkan feeds sobat dalam script tersebut.
Selamat mencoba, sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.
rating 4.5

Read more »

Memasang Related Post pada Sidebar

Memasang Related Post pada Sidebar - salam super sobat semua, kali ini saya akan menjelaskan Memasang Related Post pada Sidebar blog atau Menampilkan menu tambahan pada sidebar bisa merupakan alternatif bagi blogger agar pembaca bisa melihat/membaca artikel yang ada secara mudah, Pada umumnya penempatan artikel yang terkait diletakkan dibawah posting/artikel, dengan berbagai modifikasi, ada yang menambahkan icon disamping judul artikel, ada yang membuat related post dengan fungsi scroll dan ada yang membuat related post tampil dengan image, kali ini saya ingin berbagi mengenai cara membuat related post tampil di sidebar seperti di blog ini. caranya tidak sulit dan bahkan mudah untuk dilakukan.
Ikuti langkah Berikut :
Login ke account blogger anda, klik rancangan/layout lalu klik edit HTML
Jangan lupa centang expand widget templates untuk mengedit template secara keseluruhan
masukan kode dibawah ini sebelum tag </head>

<script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;
    }
    }
    }
    }
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];
    }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
    }
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;
    }
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;
    }
    i++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>

kemudian cari kode widget seperti dibawah ini :

    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
    </b:if>

Kemudian tambahkan kode yang warna merah pada kode tersebut :

    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp; max-results=10"' type='text/javascript'/>

    </b:if>

    </b:loop>
    </b:if>

• Save template
• Masuk ke menu Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post ( atau yang lain sesuai kebutuhan ) kemudian copy paste script di bawah ini : //bisa pasang dibagian mana saja//side bar//footer//sesuai kebutuhan//

    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>

Simpan dan lihat hasilnya..
rating 4.5

Read more »

Membuat Form Kontak di WordPress

Membuat Form Kontak di WordPress - saya rasa sobat semua sudah paham apa yang dinamakan form kontak, namun kalo ada yang belum paham akan kita ulas sekilas saja. Form kontak biasanya digunakan oleh web owner (admin blog) berfungsi sebagai sarana komunikasi antara si admin dengan pembaca yang punya keperluan khusus. Apalagi bagi blog yang menyediakan jasa pasang iklan murah kayak saya (promosi.com) Form Kontak sangat dibutuhkan.Nah bedanya dengan form komentar apa Nas? Biasanya form komentar dipakai untu sesi tanya jawab atau sesi apresiasi atas tulisan yang dibahas

Membuat Form Kontak di WordPress dengan mudah kita dapat menggunakan bantuan plugin Contact Form 7. Baru saja saya membuat form kontak dengan bantuan plugin ini. Caranya gampang kok :

1. Cukup install plugin Contact Form 7, cari aja dari dashboard wordpress atau download disini

2. Kemudian aktifkan dan copas scriptya ke post/halaman yang ingin anda pasang form kontak.

rating 4.5

Read more »

Cara Mudah Membuat Effek Zoom Gambar di Blog

Cara Mudah Membuat Effek Zoom Gambar di Blog - Sobat blogger mungkin masih sedikit yang tau tentang Membuat Effek Zoom Gambar di Blog, banyak kegunaan dari effek ini. Effek ini menggunakan jQuery, sehingga tampilannya akan lebih lembut dan halus. Ada kalanya kita melihat suatu gambar tutor yang tampilan gambarnya sangat kecil dan tidak jelas, Effek Zoom ini menampilkan gambar dengan ukuran sebenarnya, buat sobat yang penasaran, contohnya bisa sobat lihat di SudutPhoto. Jika sobat berminat, ikuti langkah-langkah berikut ini;

Cara Mudah Membuat Effek Zoom Gambar di Blog
Masuk ke blogger;
Klik Perancangan lalu klik Edit HTML;
Carilah kode ]]></b:skin>
Kemudian sisipkan kode berikut ini tepat di atasnya:
/* Zoom Image http://m-wali.blogspot.com
------------------------------- */
div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}

Selanjutnya cari kode    </head>
Kemudian sisipkan kode berikut ini tepat di atasnya:

<!-- Zoom Image code script www.wakrizki.net -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script src='http://rizki-khaizir.googlecode.com/files/jquery.imageZoom.min.js' type='text/javascript'/> 
<script type='text/javascript'> 
jQuery(document.body).imageZoom(); 
</script>
Langkah terakhir adalah simpan template sobat. Semoga berhasil

oke mudah bukan? demikian Cara Mudah Membuat Effek Zoom Gambar di Blog

rating 4.5

Read more »

Cara Membuat Scroll Pada Archive Blog

Cara Membuat Scroll Pada Archive Blog -  ini hampir sama dengan membuat Fungsi Scroll Pada Label / Kategori yang telah saya posting sebelumnya, perbedaannya hanya terletak pada kata label dengan archive saja.

Untuk  jelasnya langsung saja langkahnya seperti ini :

1.  Login ke Acount Blogger atau Dashboard
2.  Pilih Layout
3.  Llalu klik Edit HTML
4.  Centang dulu  Expand Widget Templates
5.  Cari kode yang seperti ini : <div id='ArchiveList'>  atau kata Archive.
Untuk memudahkan mencarinya , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next.atau tanda panah(di google chrome).

6.  Kalau sudah,  tambahkan kode warna merah itu sebagai scollnya
Lengkapnya kode tersebut seperti dibawah ini :

<h2><data:title/></h2>

  </b:if>

  <div class='widget-content'>

<div style='overflow:auto; width:ancho; height:220px;'>

  <div id='ArchiveList'>

  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>

    <b:if cond='data:style == &quot;HIERARCHY&quot;'>

     <b:include data='data' name='interval'/>

    </b:if>

    <b:if cond='data:style == &quot;FLAT&quot;'>

      <b:include data='data' name='flat'/>

    </b:if>

    <b:if cond='data:style == &quot;MENU&quot;'>

      <b:include data='data' name='menu'/>

    </b:if>

  </div></div>

  </div>

  <b:include name='quickedit'/>

  </div>

</b:includable>

Angka 200px adalah tinggi kotak scroll itu, silahkan disesuaikan.

Mungkin saja diblog anda kodenya berbeda,  Oleh karena itu carilah yang mirip dan perlu dicoba, terus jangan lupa templatenya dibackup dulu.ya

Kalau sudah jangan lupa save template .
 rating 4.5

Read more »

Cara Membuat Info link di Blog

Cara Membuat Info link di Blog - infolink adalah sebuah situs yang bergerak di bidang jasa iklan (PPC) yang membedakannya adalah setiap link di blog kita bila di sorot akan muncul link beserta sponsor dari infolink. low menurut kang salman sendiri info link ini tidak terlalu di sukai oleh para pengunjung. oleh karena itu disini kang salman tidak membahasny secara mendalam. jika ingin memasang infolink di blog atau website anda langkah pertama yang harus anda lakukan adalah :
Silakan menuju halaman ini http://www.infolinks.com/signup.html silakan anda mendaftaer
Setelah itu ikuti step demi stepnya. sampai tiba saatnya kamu mengcopy kode yang diberikan oleh infolink.
login ke blogger
pilih edit HTML/javascript
paste kode yang telah kamu copy tadi
Simpan, dan lihat hasilnya.
Tips: Sebaiknya siapkan blog untuk di daftarkan ke infolink dengan 10-15 artikel bahasa inggris di bidang keuangan, manga, makanan, travel dan bisnis online. news, gedget.

Untuk tutorial lengkapnya silakan baca cara daftar dan pasang infolinks di blog
semoga informasi singkat ini dapat membantu rating 4.5

Read more »

Kode HTML untuk Membuat Tulisan Berbayang atau Shadow

Kode HTML untuk Membuat Tulisan Berbayang atau Shadow - Jika anda menulis artikel di blogspot atau wordpress pernahkah anda membuat tulisan yang kelihatan berbayang atau seolah ada efek shadow. Nah jika anda ingin membuat tulisan yang mempunyai efek berbayang anda bisa menggunakan CSS atau langsung menulis kode html-nya terserah anda yang mana menurut anda anggap mudah.

untuk membuat tulisan berbayang maka anda akan menggunakan perintah text-shadow yaitu dengan contoh format penulisan HTMLnya


<p style="text-shadow: 1px 2px 4px #ff3399;"> Tulis Tulisan Anda disini </p>

Contoh :

Ali Bloggers Community

Penjelasannya untuk penulisan kode HTML tulisan berbayang, yaitu:


pada ukuran 1px diatas menunjukkan posisi relatif bayangan berdasarkan sumbu X dan anda bisa merubah ukurannya sesuai yang anda inginkan (nilai positif kearah kanan dan nilai negatif kearah kiri)
pada ukuran 2px diatas menunjukkan posisi relatif bayangan berdasarkan sumbu Y dan anda bisa merubah ukurannya sesuai yang anda inginkan (nilai positif kearah bawah dan nilai negatif kearah atas)
pada ukuran 4 px diatas menunjukkan ukuran blur dari bayangan yang terbentuk dan anda bisa merubah ukurannya sesuai yang anda inginkan
#ff3399 diatas menunjukkan warna dari bayangan dan anda bisa mengganti warna yang lain yang anda inginkan.
Jika anda ingin memberikan warna pada tulisannya sesuai dengan yang anda inginkan maka anda bisa menambahkan perintah color pada style, misalnya <p style="text-shadow: 1px 2px 4px #ff3399;color:#0000ff;">
Jika anda ingin membuat efek tulisan tebal maka anda bisa menambahkan perintah font-weight pada style dengan value bold, misalnya <p style="text-shadow: 1px 2px 4px #ff3399;color:#0000ff;font-weight:bold">
Jika anda menginginkan paragraphnya rata kiri-kanan atau justify maka anda bisa menambahkan perintah text-align pada style dengan value justify, misalnya <p style="text-align:justify;text-shadow: 1px 2px 4px #ff3399;color:#0000ff;font-weight:bold">
Anda bisa saja mengganti tag p yang digunakan untuk paragrap menjadi span jika hanya pada sebagian tulisan dalam satu paragrap yang akan diberikan efek berbayang.



rating 4.5

Read more »

Cara Membuat Garis di Blog

Cara Membuat Garis di Blog - kali ini saya akan menjelaskan  Cara Membuat Garis di Blog , atau bisa juga di katakan Cara Membuat Garis Pemisah Blog oke langsung saja simak postingan di bawah ini,

1. Login di dasbor
2. Anda tinggal mau menerapkannya dimana?? di postingan? Oke atau di Kode HTML? juga tentunya Oke

anda hanya menambahkan kode

<hr/>

Hasilnya :

---

Anda mau Garisnya Berwarna??? Oke

Anda hanya membutuhkan Kode ini

<hr color='color:#000000:'/>

Hasilnya:

---

Selain itu anda juga memodifikasinya lagi yaitu mengubah ukuran garisnya sesuai Selera kamu!!!

Anda hanya Butuh kode ini:

<hr color='color:#000000:' width='400px'/>

Hasilnya :

---

Semoga Tutorial Blogger tentang  Cara Membuat Garis di Blog  bermanfaat bagi kamu. rating 4.5

Read more »

Cara Membuat Artikel Populer Di Blogspot

Cara Membuat Artikel Populer Di Blogspot - Berbicara Mengenai Cara Membuat Artikel Populer Di Blogspot adalah merupakan hal yang sangat mudah, kita hanya perlu sebua scrip.
Berikut Cara Membuat Artikel Populer Di Blogspot

Masuk ke blogger

Silahkan tuju Elemen Halaman

Kemudian Tambah Gadget

Pilih HTML/JavaScript

Silahkan Copy Paste Script dibawah ini

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ff855e4f4d4a10fde1c2eb32074f99cd&url=http%3A%2F%2FNamaBlogKamu.blogspot.com&num=10" type="text/javascript"></script>
<small>Edited <a href="http://www.m-wali.blogspot.com" target="_blank">Ali  Bloggers</a></small>

Silahkan ganti NamaBlogKamu.blogspot.com dengan Url Blog kamu

Angka 10 menunjukkan jumlah artikel yang tampil 

Jika sudah Klik Simpan

Selesai .. nah sampai di sini Cara Membuat Artikel Populer Di Blogspot selesai

rating 4.5

Read more »

Membuat Popular Post lebih Menarik dengan Animasi 3D Cube di Blogspot

Membuat Popular Post lebih Menarik dengan Animasi 3D Cube di Blogspot - Caranya sangat Mudah sobat, silahkan ikuti langkah singakat berikut ini, hanya menambahkan ke Gadget Baru saja.

1. Login Ke Blogger
2. Design (Rancangan) --> Page Element (Element Laman)
3. Click “Add Gadget” dan pilih “Popular Posts”(Jika Gadget ini Sudah ada lewati langkah ini)
n/b : Activekan Image thumbnail
4. Setelah sobat mempunyai Gadget Popular Post, Click “Add Gadget” lagi dan pilih "HTML/Javascript”
5. Copykan Kode dibawah ini di bagian Content Gadget HTML/Javascript dan Save.

<style type="text/css">


.cube { width: 100%; height: 200px;}


a img { border: none; }


#linksCube img { width: 100%; height: 100%; }


</style>


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


<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"></script>


<script type="text/javascript" charset="utf-8">


$(function () {


    $('.popular-posts ul').abupopularcube();


});


</script>


<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/popularcube.js"></script>

Pada bagian code .cube { width: 100%; height: 200px;} yang 100% bisa sobat ganti dengan satuan px (misalkan 200px)sesuai ukuran Sidebar Blog sobat.






Thanks To Abu-Farhan atas kode script diatas.

rating 4.5

Read more »

Cara Pasang Tombol Google Plus Di Posting Blog

Cara Pasang Tombol Google Plus Di Posting Blog - Cara Pasang Google Plus Di Posting Blog and Pasang Tombol Button Widget google plus button | google+ di postingan blog - dan Cara Pasang Google Plus Di Postingan Blog yah itulah Tutorial Blog kali ini saya akan berbagi cara pasang button google plus | google+ di posting blog , namun saya terangkan beberapa hal kegunaan button google plus ini , fungsi dari plugin google ini sama seperti fungsi yang lain yaitu untuk berbagi dan menyebarkan informasi pada pengguna google+ , namun fungsi utama saya gunakan google plus button ini untuk menjadikan salah satu teknik seo , sehingga bisa mendapatkan hasil terbaik blog dalam pemburuan seo , jadi apa salahnya menggunakan plugin gratis google ini untuk melakukan seo maupun pemasaran . Ada beberapa cara untuk memasang google+ button ini diantaranya memasang google plus di atas posting blog , maupun Cara memasang google plus di bawah posting blog .

Oke Langsung saja ke  Cara Pasang Tombol Google Plus Di Posting Blog

1. Masuk ke akun blog anda --&gt; rancangan --&gt; edit html --&gt; Expand Template Widget
2. Cari kode ini &lt;/head&gt;
3. Pasang kode script google plus ini di atas kode tadi

Kode google plus button untuk blog berbahasa inggris 
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;

Kode google plus button untuk blog berbahasa indonesia
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;{lang:&#039;id&#039;}&lt;/script&gt;
4. Masukan kode google plus button di blog ,keterangan nya akan dibahas satu persatu dibawah.
Untuk mencari ukuran kode google plus silahkan anda baca posting saya Cara Pasang button google plus | tombol google+ di blog

Cara Pasang google plus di kanan atas posting

Untuk memasang google plus di kanan posting anda cari kode berikut ini:

&lt;data:post.body&gt; (bila menemukan beberapa kode yang sama , simpan pada kode yang kedua bila yang telah menggunakan related posts , apabila belum berhasil coba satu persatu karena setiap template berbeda )

Lalu simpan kode ini diatas kode tadi

&lt;b:if cond=&#039;data:blog.pageType != &amp;quot;static_page&amp;quot;&#039;&gt;
&lt;div style=&#039;float:right&#039;&gt;
&lt;g:plusone expr:href=&#039;data:post.url&#039; size=&#039;medium&#039;/&gt;
&lt;/div&gt;
&lt;/b:if&gt;

Simpan 
Pasang google plus di kiri atas posting

Untuk memasang google plus di posting kiri atas anda cukup mengikuti proses yang telah diterangkan tadi dan cukup mengganti kode google plus &lt;div style=&#039;float:right&#039;&gt; dengan &lt;div style=&#039;float:left&#039;&gt; lalu simpan google plus plugin anda.


Pasang Google Plus Button Di Bawah Posting
Saya akan menerangkan cara pasang button google plus di kiri bawah posting dan cara pasang google plus button di kanan bawah posting blog .

Pasang google plus di kanan bawah posting

Untuk cara pasang google plus di kanan bawah posting ini anda cukup mengulangi proses 1 sampai 3 Diatas dan cari kode berikut ini

&lt;data:post.body&gt; (bila menemukan beberapa kode yang sama , simpan pada kode yang kedua bila yang telah menggunakan related posts , apabila belum berhasil coba satu persatu karena setiap template berbeda )

Lalu pasang kode berikut ini di bawah kode tadi

&lt;b:if cond=&#039;data:blog.pageType != &amp;quot;static_page&amp;quot;&#039;&gt;
&lt;div style=&#039;float:right&#039;&gt;
&lt;g:plusone expr:href=&#039;data:post.url&#039; size=&#039;medium&#039;/&gt;
&lt;/div&gt;
&lt;/b:if&gt;

Pasang google plus di kiri bawah posting
Untuk memasang google plus di posting kiri bawah anda cukup mengikuti proses yang telah diterangkan tadi dan cukup mengganti kode google plus &lt;div style=&#039;float:right&#039;&gt; dengan &lt;div style=&#039;float:left&#039;&gt; lalu simpan google plus plugin anda.

Oke cukup sekian cara Pasang  
Source :  sepanjang-wage.com 

rating 4.5

Read more »