Membuat Scrollbox 2

00.36 trima 0 komentar

Scroll box ini memang bykan scrollbox sederhana. Box didesain secara lengkap dengan penataan secara khusus untuk menampilkan sebuah artikel pendek lengkap dengan box title, boks teks serta box thumbnail (image berukuran kecil). Anda dapat menggunakannya untuk ringkasan posting, misalnya.

Label: arsip belajar blog, blog

Baca selengkapnya »

Zoom image dengan krusor

12.45 trima 0 komentar

Zoom Image sangat bagus dan effektif untuk menciptakan effisiensi halaman blog. Dengan mengatur ukuran gambar, kita dapat memilih ukuran gambar yang ingin kita tampilkan di halaman blog hingga ukuran terkecil yang diinginkan. Sentuhan cursor pada gambar membuat gambar orisinil akan terpampangkan dihalaman blog sesuai dengan ukuran aslinya.

D E M O

Klik link demo di bawah ini untuk melihat bagaimana image zoom bekerja dan membuat posting bertambah cantik.

DEMO: Image zoom

Kode CSS

.GRzoombox{
       position:relative;
       float:left;
       width:224px;
       height:174px;
       margin:5px 15px 5px 0;
}
.GRzoombox .GRzoom{
       position:absolute;
       left:0;
       top:0;
       padding:0;
       margin:0;
       border:12px ridge #663333;
       border-radius:8px;
       width:200px;
       height:150px;
}
.GRzoombox .GRzoom:hover{
       z-index:99999;
}

Javascript:

<script src="http://gubhugreyotprojects.googlecode.com/svn/GRzoom.js" type="text/javascript"></script>

xHTML Posting Image Zoom

<div class="GRzoombox">
<img class="GRzoom" src="image.jpg" />
</div>Tuliskan teks atau kalimat anda di sini! Jika teks jumlahnya tak terlalu banyak dan anda ingin menggunakan image zoom lagi di bawahnya maka setelah teks terakhir tambahkan kode <div style="clear:both;"></div> 
Gunakan image (image.jpg dengan ukuran selebar halaman posting atau lebih kecil. Jika image terlalu besar maka ketika zoom image bekerja gambar akan melewati halaman posting hingga ke sidebar kanan.

Cara Menyimpan Kode CSS dan javascript

Login ke Blogger
Setelah halaman Dasbor (dasboard) terlihat, klik Design (Rancangan)
Lanjutkan dengan klik "Edit HTML"
Lakukan Backup Template. Caranya bisa anda buka di Special Tutorials yang ada di menu sebelah kiri.
Cari kode ]]></b:skin> kemudian letakkan kode CSS di atasnya.
Cari kode <head>. Letakkan javascript di atasnya.
Klik "Simpan Template (Save Template)"
Gunakan xHTML untuk posting seperti yang terlihat dlam box xHTML.
Selesai dan selamat posting ... selamat ngelembur!!!!!

Label: arsip belajar blog, blog

membuat tooltip untuk daftar link pada blog

12.17 trima 0 komentar

Jika blog anda mempunyai lebar sidebar terlalu sempit dan widget Blog Archive terletak di situ maka teks link arsip blog akan bertumpuk-tumpuk karena lebar tak tercukupi. Atau mungkin teks link arsip blog menggunakan font berukuran kecil hingga untuk membaca setiap link harus memelototkan mata? Mengapa tidak anda coba menggunakan tooltip agar semua daftar posting di arsip blog terbaca dengan mudah?! Banyak keuntungan yang diperoleh dengan menampilkan tips di arsip blog. Selain pengunjung merasa lebih nyaman, andapun akan lebih mudah melakukan penataan widget archive. Mungkin saja widget tersebut dapat anda tambahkan properti css white-space:nowrap; agar teks link tidak bertumpuk ketika ruang archive sempit? Atau mungkin saja memang anda perlu memperkecil ukuran font-nya agar terlihat rapi?! Dalam gambar disamping (letakkan cursor di atas gambar untuk perbesar!) kita bisa lihat salah satu masalah yang terjadi saat widget blog arhive mempunyai lebar terlalu sempit. Setiap daftar posting menjadi bertumpuk sehingga daftar arsip tampak berderet begitu tinggi.

Ada dua kemungkinan berkaitan dengan upaya menampilkan tips di widget Blog Archive:

Menggunakan tootip defaul browser.
Tooltip akan ditampilkan sesuai browser yang digunakan untuk membuka blog. Jika menggunakan cara ini anda hanya perlu melakukan sedikit modifikasi di widget Blog Archive dan tooltip langsung bisa terlihat.
Menggunakan jQuery Simple Tooltip atau tooltip yang lain.
Cara ke dua memungkinkan kita untuk melakukan berbagai perubahan pada tampilan tooltip. Anda bisa rubah ukuran font, ketebalan font, warna font (color), mengatur ukuran box tooltip, memberi warna atau menampilkan berbagai variasi pada background tooltip. Cara ini juga akan memberi keindahan pada blog dan memberi kesan eksklusif.

Setelah demo terlihat, arahkan cursor anda pada setiap link daftar arsip blog yang terletak di sidebar kanan (Blog Archive).

Demo Tooltip Arsip Blog

Kita akan buat terlebih dahulu agar Blog Archive mampu menampilkan tips di setisp daftar link-nya, setelah itu anda bisa menentukan pilihan terbaik yang cocok menurut anda!

Cara membuat tooltip di widget Blog Archive

Login ke Blogger.
Setelah halaman Dasbor (Dasboard) terbuka, cari dan klik Rancangan (Design).
Pilih dan klik Edit HTML.
Lakukan Backup Template.
Klik Expand Widget Template.

Cari kode :

<li><a expr:href='data:i.url'><data:i.title/></a></li>

Ganti dengan kode berikut:

<li><a expr:href='data:i.url' expr:title='data:i.title'>

<data:i.title/></a></li>

Klik Simpan Template (Save Template).
Buka Blog dan lihat hasilnya.

Tooltip Blog Archive dg Simple jQuery Tooltip

Jika anda menggunakan metode kedua ini untuk menampilkan tooltip di widget Blog Archive, maka disamping terlihat lebih cantik, menarik serta bebas untuk melakukan pengaturan tampilan tooltip, andapun bisa memanfaatkan tooltipnya pada link-link lain di luar widget Blog Archive. Yah ...., tentu saja akan jauh lebih menarik dan blog semakin cantik.

Cara membuat

Tambahkan class="GRtipz" pada kode perubahan yang terlihat di atas, sehingga kode perubahan bentuknya seperti berikut:
```
<li><a class='GRtipz' expr:href='data:i.url' expr:title='data:i.title'><data:i.title/></a></li>
```
Buat Simple jQuery Tooltip. Panduan dan tutorialnya bisa anda buka melalui link tutorial di bawah ini:
Panduan membuat Simple jQuery Tooltip

Label: arsip belajar blog, blog

Energy Saving mode menggunakan css3

11.11 trima 0 komentar

Energy Saving mode yang dibuat menggunakan css3 ini mempunyai kode sekaligus efek lebih sederhana dibandingkan yang telah kita launcing pada bulan Oktober 2010. Cara membuatnya masih sama persis dengan posting terdahulu, hanya anda perlu mengganti seluruh kode CSS dengan yang baru. Satu lagi yang berbeda adalah pada penggunaan background image. Energy Saving Mode CSS3 kali sama sekali tidak menggunakan background image karena telah kita ganti dengan css3 background gradient.

Energy saving mode pada demo menggunakan background gradient berwarna hijau, sedangkan yang akan kita buat berwarna hitam. penggunaan warna background hitam polos dimaksudkan memberi efek transformasi dan transisi warna saat energy saving mode terbuka (tersentuh cursor).

Demo Lebih Sederhana

Kode CSS:

*, body .bgsGR_esm{
      margin:0;
      padding:0;
}
body .bgsGR_esm{
      position:fixed;
      width:98%;
      top:0;
      left:0; /* original code by: gubhugreyot.blogspot.com */
      height:97%;
      opacity:.99;
      filter:alpha(opacity=99);
      -ms-filter:alpha(opacity=99);
      background:#000;
      border:10px solid #666;
      border-bottom:30px solid #666;
      z-index:99999999;
      transition:all 6s ease-in-out 60s;
      -o-transition:all 6s ease-in-out 60s;
      -moz-transition:all 6s ease-in-out 60s;
      -webkit-transition:all 6s ease-in-out 60s;
      -ms-transition:all 6s ease-in-out 60s;
}
body:hover .bgsGR_esm{
      border-color:#F00;
      background:#930;
      width:50%;
      height:3%;
      left:25%;
      top:40%; /* original code by: gubhugreyot.blogdetik.com */
      transition:3.5s ease-out;
      -o-transition:3.5s ease-out;
      -moz-transition:3.5s ease-out;
      -webkit-transition:3.5s ease-out;
      -ms-transition:3.5s ease-out;
}
body:hover .bgsGR_esm,body:hover .bgsGR_esm p.esm1,body:hover .bgsGR_esm p span.esm2,body:hover .bgsGR_esm p span.esm3,body:hover .bgsGR_esm .by_gubhugreyot{
      transition:3s;
      -o-transition:3s;
      -moz-transition:3s;
      -webkit-transition:3s;
      -ms-transition:3s;
      z-index:-10;
      opacity:.0;
      filter:alpha(opacity=0);
      -ms-filter:alpha(opacity=0);
}
body .bgsGR_esm p.esm1{
      margin:0; /* original code by: gubhugreyot */
      padding:0;
      width:92%;
      height:100%;
      background:transparent;
      font-size:100px;
      font-family:Serif,Times New Roman;
      color:#333;
      text-shadow:1px 1px 2px #ccc;
      position:relative;
      margin-top:200px;
      line-height:20px;
      font-weight:bold;
      text-align:center;
      display:block;
      margin-left:auto;
      margin-right:auto;
}
.bgsGR_esm p span.esm2{
      font-size:18px;
      opacity:.5;
      filter:alpha(opacity=50);
      -ms-filter:alpha(opacity=50);
      display:block;
      text-align:center;
      margin:-10px auto;
      font-weight:normal;
      padding:2px 8px;
      background:#000;
      border:1px solid #333;
      color:#00f;
      text-shadow:none;
      font-family:Arial,Helvetica,sans-serif;
}
.bgsGR_esm p span.esm3{
      color:#ccc;
      font-family:Tahoma,Arial,Helvetica;
      display:block;
      margin:10px auto;
      background:#111;
      background:-moz-linear-gradient(top,#111 0,#666 100%);
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#111),color-stop(100%,#666));
      background:-webkit-linear-gradient(top,#111 0,#666 100%);
      background:-o-linear-gradient(top,#111 0,#666 100%);
      background:-ms-linear-gradient(top,#111 0,#666 100%);
      background:linear-gradient(top,#111 0,#666 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111',endColorstr='#666666',GradientType=0);
      opacity:.6;
      filter:alpha(opacity=60);
      -ms-filter:alpha(opacity=60);
      width:250px;
      text-shadow:1px 1px 1px #000;
      border:1px solid #333;
      border-radius:4px;
      padding:2px 10px;
      font-size:12px;
      font-weight:normal;
      line-height:16px;
}
.bgsGR_esm .by_gubhugreyot{
      margin-left:30px;
      text-align:left;
      color:#015828;
      font-size:12px;
      font-weight:normal;
      position:absolute;
      top:550px;
      width:100%;
      height:20px;
      left:0;
}
.bgsGR_esm .by_gubhugreyot span.esm4{
      color:#aaa;
      font-style:italic;
}

xHTML

<div class='bgsGR_esm'><p class='esm1'>gubhug reyot<br/><span class='esm2'>Energy Saving Mode Using CSS3</span><br/><br/><span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</span></p><div class='by_gubhugreyot'>Copyright * Feb 2012 * <span class='esm4'>gubhugreyot.blogspot.com</span> - All rights reserved</div></div>

Catatan/Keterangan

Simpan kode CSS di atas kode ]]></b:skin>
Simpan xHTML di bawah kode <body> , atau
<body expr:class='"loading" + data:blog.mobileClass'>
Untuk mengatur durasi waktu Energy Saving Mode lakukan perubahan nilai (60s) pada syntax body .bgsGR_esm(kode paling atas!):
```
all 6s ease-in-out 60s;
```
nilai 60s; menciptakan durasi 60 detik energy saving secara rutin bekerja menutup layar dengan background hitam. Untuk merubah durasi menjadi 5 menit maka nilai menjadi 5x60 = 300s. Untuk durasi yang berbeda silahkan hitung sendiri.
Ganti Teks gubhug reyot yang ber-warna merah dengan nama blog anda atau teks lain.
Panduan yang lebih detail untuk memasang dan menyimpan kode Energy Saving Mode dapat dibuka melalui link di bawah ini:

Label: arsip belajar blog, blog

Post Slide Herisontal kesamping

01.04 trima 0 komentar

hallo gan, kali ini saya mau ngasih tau artikel yang cukup bagus buat blog agan nih nama judulnya adalah cara buat slider post berjalan horizontal dibawah header.

Sebelumnya saya sudah pernah posting yaitu cara buat recent post horizontal di atas postingan. Tapi yang ini berbeda karna yang ini bisa berjalan dan ada tanda panahnya dikanan dan dikiri plus bisa jalan juga loh. Tapi yang ini ane gak pake karna ane males make - make yang beginian.
Sebenarnya ane demen banget sampe ane cari - cari buat dapetin slider post kaya gini, eh setelah saya dapet ide saya ambil scriptnya aja dari template mastemlate.com. Kalau sobat mau tau cara pemasangannya ikuti saya yah !
1. log in blogger
2. template > edit html
3. cari kode ]]></b:skin> dengan cara ctrl+f atau f3 dan letakan kode dibawah ini tepat diatas kode ]]></b:skin>

#carousel{width:1100px;height:200px;border-bottom:1px solid #ccc;position:relative;display:block;background:#000;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:1100px;height:200px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:30px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7HhgOeTCccurx-Mo8SINUkkzvmftWd6BjElm-xyawSm2tl4IUDEi3W8Yq-LKdfTB94vavWBbJtX2A5rES4qmAZZ6vnBSfdKETqRnOVeGwtZa5eDkG42zM0gGIvFvEdvJ4GgCqqfCb8y1G/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTM_aQ8SUe0aW7BwN9RpFIkQftAXyPjARadHZExmQw5GyLv0zhWevtkFjb-moShh6IiJwnaWs_LcrdThBnCgQNKXI69jJhTvY-v99Qz0Xx_bSuZjsMdT1J1Mf8XHZDLbMseOgiFu9ktlJ1/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#04B404;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 5px 2px;padding:6px}
#carousel ul li a.slider_title{color:#fff;display:block;margin-top:0;padding-top:0}

-- kode warna hijau sama kan dengan lebar dan tinggi blog sobat --
-- semua kode warna merah yang diatas boleh sobat ganti dengan kode warna yang sobat mau --

4. cari kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU8QmKYyEkPjMBaiEObeLs9wzHR0RIMPlKqtEpsEDP7c9t8hZCtccKyPOefaS_BrcrylfR2U6rRAivjlrqzb8iry_x6reHkuHQR0LtkKQgL7AD3Tmg7aHrc0fX1dCgC1aSePB8z6NgWrE/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 12;
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]></script>

-- kode warna merah adalah jquery, jika sobat sudah mempunyai jquey maka jangan dipasang lagi --
-- kode warna biru adalah tinggi dan lebar foto yang akan ditampilkan --

5. cari kode salah satu dibawah ini !
-- <div id ='main-wrapper'>
-- <div class='main-outer'>

6. kalau sudah ketemu letakan script dibawah ini dan pastekan diatas kode yang tadi anda cari!

document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

</script>

</div>

</div>

(function($) { $(document).ready(function(){

$("#carousel .container").jCarouselLite({

auto:4000,

scroll: 1,

speed: 800,

visible: 15,

start: 0,

circular: true,

btnPrev: "#previous_button",

btnNext: "#next_button"

});

})})(jQuery)

</script>

7. Simpan hasilnya dan lihat blog sobat

Oke sekian dulu artikel ini. Mohon maaf jika ada salah - salah kata happy blogging dan Wassalam.

Label: arsip belajar blog, blog

Membuat deret menu vertikal kebawah dengan icon gambar

00.33 trima 0 komentar

Cara Membuat Widget Menu Vertikal Dengan Icon/Gambar - Menu vertikal
atau pun menu horizontal memang tidak bisa di hindari dalam dunia
blogger. Terutama menu horizontal yang 90% template pasti ada menu
horizontal. Nah pada posting kali ini saya akan berbagi
tutorial cara membuat menu vertikal dengan gambar/icon di blogspot seperti gambar dibawah ini.

Langkah-langkah Membuat Menu Vertikal :

Login terlebih dahulu
Klik Rancangan >> Elemen laman >> Tambah gadget >> HTML/Javascript
Kemudian copy kode dibawah ini lalu pastekan di kotak yang disediakan. Lalu Simpan/Save.

Keterangan :

Ganti kode warna merah dengan URL icon sobat.
Ganti kode warna biru dengan URL Tujuan.
Ganti Kode Warna Orange dengan nama menu.
Ganti kode warna ungu untuk mengganti warna background.

Untuk memperbanyak atau menambah jumlah menu, silahkan tambahkan kode dibawah ini diatas code </table>

Selamat Mencoba Sobat....Semoga Berhasil.........

sumber: Cara Membuat Widget Menu Vertikal Dengan Icon/Gambar

Label: arsip belajar blog, blog

Membuat berlangganan lewat email dengan feedburner

22.05 trima 0 komentar

Apakah teman-teman sudah mengetahui manfaat menyediakan langganan email (email newsletter) di website sebagai salah satu metode pemasaran menjemput bola ?
Yuk membuatnya dengan menggunakan jasa Feedburner.
Caranya sangat mudah:
Silahkan menuju www.feedburner.com dan login menggunakan account Google atau Gmail. Jika belum memilikinya, silahkan melakukan pendaftaran terlebih dahulu.

Lalu klik Feed teman-teman. Apabila belum memilikinya silahkan membuatnya terlebih dahulu.

Klik “Publicize“.
Klik “Email Subscriptions“.
Lalu klik “Activate“.
Silahkan Copy (Control-C) kode HTML yang diberikan dan tempatkan pada website.
Contoh hasilnya seperti terlihat pada website Semut Kecil.

Bagi teman-teman yang memahami kode HTML, silahkan melakukan penyesuaian terhadap kode HTML yang diberikan agar semakin pas dengan tampilan website.

Semoga bermanfaat trimasih sumber aslinya :
http://www.semutkecil.com/email-newsletter-gratis-dengan-feedburner/

Label: arsip belajar blog, blog

Apa itu Feed Burner dan cara daftar

21.54 trima 0 komentar

Daftar Feedburner – Feedburner merupakan salah satu produk milik Google. Feedburner adalah layanan dengan fitur untuk berlangganan konten blog bagi pembaca. Jika kita memiliki sebuah blog dan mendaftar pada Feedburner maka kita dapat memfasilitasi pembaca untuk menerima update konten blog terbaru kita via email tanpa harus berkunjung ke blog. Layanan Feedburner dapat diakses secara gratis dan mudah terintegrasi dengan layanan Google lainnya seperti blogspot.

Feedburner merupakan salah satu layanan Google yang memberikan fasilitas untuk mengirimkan konten terbaru dari sebuah blog kepada pembaca yang telah berlangganan kepada blog tersebut.

Feedburner memberikan layanan yang memudahkan pembaca blog kita menerima update konten blog via email tanpa harus berkunjung langsung ke blog kita. Akan tetapi, layanan ini dapat menjadi dilema apabila pembaca selalu bergantung pada kiriman konten blog via email. Hal ini tentu akan mengurangi jumlah kunjungan pembaca ke blog kita jika kita tidak bijak dalam mengelola layanan Feedburner.

Cara untuk mendaftar dan menggunakan Feedburner adalah sebagai berikut.

1. Buka halaman Feedburner.
Feedburner merupakan layanan Google yang saling terintegrasi dengan layanan Google lainnya. Jika kita memiliki akun Google seperti gmail, langsung masuk untuk Login. Jika belum, buat akun Google terlebih dahulu dengan klik Sign Up.
2. Masukan URL blog kita, contoh: inspirasikecilku.blogspot.com > next.

3. Pilih feed sumber asal dari blog kita, coba pilih Atom feed > next.
4. Pilih judul feed dan URL feed > next.

5. Feed blog menggunakan Feedburner sudah jadi > next > pilih pengaturan statistik feed sesuai keperluan > next.

6. Ubah pengaturan URL feed pada blogspot.
Masuk ke akun blogger > dasbor > setelan > lainnya > perhatikan umpan situs > masukan URL feed blog kita menggunakan Feedburner > simpan setelan.

7. Cara menampilkan widget ikuti lewat email dari Feedburner pada blog adalah sebagai berikut.
Masuk ke akun blogger > dasbor > tata letak > tambahkan gadget > pilih ikuti lewat email > pastikan pengaturan URL feed benar > simpan.

Layanan Feedburner akan mengirimkan konten terbaru dari blog kita kepada pembaca secara otomatis melalui email. Jika kita sudah lama tidak update blog dan pengiriman konten blog ke email pembaca tersendat maka kita dapat menggunakan fitur Ping Feedburner agar layanan pengiriman konten blog terbaru ke email pembaca menjadi lancar kembali.

maaf copas yg baik, bagi2 ilmu hehe
http://panduan-belajar-blog.blogspot.com/2013/03/daftar-feedburner.html

Label: arsip belajar blog, blog

Bikin kotak iklan pada blog 125x125

21.52 trima 0 komentar

Buat Iklan 125x125 Di Blog – Blog merupakan salah satu media bisnis online yang dapat kita manfaatkan. Perkembangan traffic atau kunjungan pembaca yang besar menjadi modal utama untuk mulai mengkomersilkan sebuah blog yang kita miliki. Kita dapat menyewakan ruang kosong pada sudut halaman blog untuk diisi dengan iklan dari advertiser.

Salah satu cara untuk menggunakan blog sebagai media penghasil rupiah lewat internet adalah menyewakan ruang iklan pada sudut halaman blog tersebut kepada advertiser.

Ruang iklan pada blog yang kita sewakan perlu diatur dengan baik. Tujuan pengaturan ini untuk mencegah penumpukan iklan yang dapat mengganggu fokus pengunjung dalam membaca. Oleh karena itu, kita sebagai pemilik blog perlu memilih berapa ukuran iklan yang nantinya disewakan agar serasi dalam halaman blog.

Iklan dengan ukuran 125x125 menjadi primadona di setiap blog yang mulai menyewakan ruang iklan di halaman blognya. Ukuran yang kecil dan harga sewa yang murah membuat ruang iklan ukuran 125x125 banyak diminati advertiser. Kita dapat menempatkan ruang iklan ukuran tersebut pada sidebar dengan format 4 in 1.

Contoh tampilan ruang iklan 125x125 4 in 1 seperti ini.

Cara untuk membuat ruang iklan 125x125 pada blog adalah sebagai berikut.

Masuk ke akun blogger > dasbor > tata letak > tambahkan gadget > pilih HTML/JavaScript > masukan kode berikut.

Keterangan:
Ganti URL GAMBAR IKLAN, URL HALAMAN IKLAN YANG DITUJU, dan JUDUL IKLAN sesuai keperluan kita.
Ganti ukuran lebar tabel 265 yang membungkus iklan sesuai keperluan.
Ganti warna background hitam #000000 sesuai keperluan.

Agar ruang iklan banyak diminati advertiser, kita dapat memberikan penawaran harga yang kompetitif. Harga yang kita tawarkan harus lebih menguntungkan bagi advertiser dibanding tawaran harga dari blog lain. Selain itu, pengiriman tawaran dengan sistem jemput bola juga dapat menarik minat advertiser untuk beriklan di blog kita.

copas ni aslinya http://panduan-belajar-blog.blogspot.com/2013/03/buat-iklan-125x125-di-blog.html

Label: arsip belajar blog, blog

Belajar sama-sama

Membuat Scrollbox 2

Zoom image dengan krusor

Kode CSS

Javascript:

xHTML Posting Image Zoom

membuat tooltip untuk daftar link pada blog

Energy Saving mode menggunakan css3

Kode CSS:

xHTML

Post Slide Herisontal kesamping

Membuat deret menu vertikal kebawah dengan icon gambar

Membuat berlangganan lewat email dengan feedburner

Apa itu Feed Burner dan cara daftar

Bikin kotak iklan pada blog 125x125

Labels

Blog Archive

Mengenai Saya