Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Jumat, 11 Januari 2013

Cara Midamel Title Bar Effect -1

Ti sagala rupa effect title bar anu tiasa urang dijieun,tah ayeuna urang bade nyobi kalawan hiji effect dina title bar kalawan sababaraha teks anu bade wedal sacara bergiliran. Kalawan kamampuhanana kanggo mewedalkeun teks sacara giliran,midamel urang tiasa mintonkeun teks anu benten-benten (variatif).

Cara midamel Title Bar Effect-1 :

  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Klik Klik Download Template (Download Full Template) » Proses Backup template.
  6. Simpen file template di folder PC.
  7. Pilari kode <head> atawa </head>.
  8. Copy jeung paste-keun javascript di handap kode <head> atawa di luhur kode </head>
  9. Klik Simpen Template (Save Template).


Javascript title bar effect-1:
<script type="text/javascript">
/* lintasbewarasunda - mitrabewara */
var message = new Array();
// Serat teks di dieu
message[0] = "mitrabewarasunda.blogspot.com";
message[1] = "Title Bar Effect 1";
message[2] = "Tutorial Blogger";
message[3] = "wilujeung sumping";
message[4] = "wilujeung panon bolotot";
message[5] = "Hatur Nuhun";
message[6] = "";
// Atur pengulangan teks sarta kecepatan di dieu
var reps = 2;
var speed = 250;  // Set the overall speed (larger number = slower action).
// ulah robah KODE handap iyeu
var p = message.length;
var T = "";
var C = 0;
var mC = 0;
var s = 0;
var sT = null;
if (reps < 1) reps = 1;
function doTheThing() {
T = message[mC];
A();
}
function A() {
s++;
if (s > 8) { s = 1;}
// you can fiddle with the patterns here...
if (s == 1) { document.title = '|============LB| '+T+' == |LB|'; }
if (s == 2) { document.title = '|========= LB| '+T+' == |LB|'; }
if (s == 3) { document.title = '|======= LB| '+T+' == |LB|'; }
if (s == 4) { document.title = '|===== LB| '+T+' == |LB|'; }
if (s == 5) { document.title = '|=== LB| '+T+' == |LB|'; }
if (s == 6) { document.title = '|= LB| '+T+' == |LB|'; }
if (s == 7) { document.title = '|LB| '+T+' == |LB|'; }
if (s == 8) { document.title = '|LB| '+T+' == |LB|'; }
if (C < (8 * reps)) {
sT = setTimeout("A()", speed);
C++;
}
else {
C = 0;
s = 0;
mC++;
if(mC > p - 1) mC = 0;
sT = null;
doTheThing();
}
}
doTheThing();
</script>

Katerangan/Catetan :
  1. Pake Ctrl + F eukeur ngagampangkeun waktu siar KODE<head> atau </head>
  2. Title bar nyaeta bar teratas ti blog.
  3. KODE nu penting dirubah :
    • message[0] s/d message[6] isi kalawan teks nu luyu kalawan blog maneh.
    • var reps = 2; angka 2 --> Jumlah pengulangan kemunculan teks.
    • var speed = 250; angka 250 --> variable kecepatan :semakin leutik beuki gancang

Mangga oge buka Tutorial sejen nu narik pisan sarta pantes di turutan kabeh. Akses ngaliwatan link handap ieu :



Update » Salasa PON, January, 11, 2013
» BEWARA SUNDA - mitrabewarasunda «

Minggu, 10 Juni 2012

Cara Midamel List Dua Lajur (2 Kolom)

List 2 (dua) lajur mangrupa hiji usaha kanggo nyiptakeun effisiensi rohang,ku kituna lamun biasana dina hiji rohang ngan aya hiji lajur list,kalawan padika ieu mangka urang tiasa memaksimalkeun tanagi tande hiji rohang blog barobah kaayaan kabagi dina 2 buah lajur. Tangtos wae kanggo memaksimalkeun usaha ieu teks saban list haruslah didamel sependek manawi luyu rohang anu sadia. Wangun List 2 lajur nyaeta sepertos dihandap iyeu:

D E M O:

Kode CSS:
#ItemA{
       padding:10px;
       width :auto;
       background:#ddd;
       border:1px dotted #333366;
       margin:20px 0;
}
#ItemA ul{padding:0;margin:0;list-style-type:none !important;}    
#ItemA li{
       height:16px;
       color:#333;
       list-style-type:none !important;
       background:#555;
       padding:5px 8px;
       font-size:0.9em;
       text-decoration:none;border-bottom:1px dotted #888;
}
#ItemA li.ItemA2{
       margin-left:50%;
       margin-top:-27px;
       padding:5px 6px;
       text-decoration:none;background:#666;
}  
.ItemA_alt{
       background:#666;
}
#ItemA a:link{text-decoration:none;color:#eee;}
#ItemA a:hover{color:#0CF;}
* html #ItemA li.ItemA2{
       margin-top:-19px;
}

xHTML :
<div id="ItemA">
<ul>
    <li><a href="URL">Item 1a</a></li>
    <li class="ItemA2"><a href="URL">Item 1b</a></li>
    <li class="ItemA_alt"><a href="URL">Item 2a</a></li>
    <li class="ItemA2"><a href="URL">Item 2b</a></li>
    <li><a href="URL">Item 3a</a></li>
    <li class="ItemA2"><a href="URL">Item 3b</a></li>
    <li class="ItemA_alt"><a href="URL">Item 4a</a></li>
    <li class="ItemA2"><a href="URL">Item 4b</a></li>
    <li><a href="URL">Item 5a</a></li>
    <li class="ItemA2"><a href="URL">Item 5b</a></li>
    <li class="ItemA_alt"><a href="URL">Item 6a</a></li>
    <li class="ItemA2"><a href="URL">Item 6b</a></li> 
</ul>
</div>

Cara Midamel List Dua Lajur (2 Kolom) :
  1. Login ka Blogger.
    • Tuliskeun "User Name" (gmail) atawa tuliskeun "Email Address" (non gmail).
    • Tuliskeun Password.
    • Klik "Sign in"
  2. Sababaraha wanci sanggeus klik sign in anjeun bade nepungan halaman "Dasbor (Dasboard)".
    Klik "Rancangan (Design)".
  3. Balik halaman anyar bade kabuka , klik "Edit HTML".
  4. Hiji halaman anyar balik urang jumpai. Halaman ieu eusina 3 (tilu) haturan:
    • Backup/Restore Template » eusina fitur kanggo ngalakukeun backup template.
      Pigawe Backup Template minangka lengkah preventif sateuacan ngalakukeun sagala rupa parobahan kode html melali penambahan ataupun pengurangan kode css, javascript jeung xHTML.
    • Edit Template » eusina hiji box ageung anu di jerona berisikan kode html penyusun blog.
    • Old Templates » eusina template lami blogger (Template Tata Lokasi & Template Klasik.
  5. Cari kode ]]></b:skin> pada "Box Edit Template".
  6. Copy kode CSS sarta letakkan di luhur ]]></b:skin>
  7. Klik "Simpen Template (Save Template)".
  8. Gunakeun xHTML waktos posting..
Catetan/Katerangan :

Panduan backup template,cara pilari kode sarta sagala rupa cara nunda kode di template tiasa dibuka di Special Tutorials dina menu palebah kenca.

Mangga oge buka Tutorial sanes anu metot pisan sarta patut di turutan sampeyan sadaya. Akses ngaliwatan link handap ieu :



Update » Rebo   WAGE,Juni,10,2012

» BEWARA SUNDA - mitrabewarasunda «

Senin, 09 Januari 2012

Ngarobah tampilan hover link

Hover anu sering dipake dina hiji blog,umumna ngan mangrupi parobahan kelir teks sabot cursor nyabak link. Kalawan ngalakukeun modifikasi dina KODE css anu aya dina template,hover tiasa urang robih ku kituna sabot cursor nyabak link,mangka henteu ngan kelir teks wae anu robih. Sababaraha KODE tambahan,sepertos background,border,style teks sarta ukuran font sanggem mikeun nuansa anu benten sabot hiji link tersentuh ku cursor.

Hiji demo handap ieu tiasa contona wangun hover link anu cobi urang kanggo.
Lamun dina conto ieu background dina link langsung didamel tanpa dumasar kadudukan hover dimargikeun ngan didamel anggo kode html tanpa bantuan kode css sarta css3. Yanga bade urang kanggo antos hasilna bade tebih langkung metot dibandingkeun conto handap ieu.

D E M O

Link baru akan terlihat seperti ini!

Cara ngarobah tampilan hover dina link:
  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Lakukeun Backup template jeung klik Download Template Lengkep (Download Full Template).
  6. Simpen file template di folder PC.
  7. Tetep di Edit HTML
  8. Teangan kode css sapertos anu katingali di handap iyeu.
    Kode CSS ieu kedah di robih:
    a:hover {
      text-decoration:underline;
      color: $(link.hover.color);
    }
  9. Kode CSS di luhur manawi moal sami persis kalawan anu aya di blog nanging anu utamana peryogi diperhatikeun nyaeta dina syntax-na (a:hover).
  10. Gentos kode di luhur kalawan kode css katut:
    Kode CSS gentosna
    a:hover {
           background: url(https://sites.google.com/site/mitrabewara/images/mitrabewarasunda-bghover-link-anima.gif);
           padding:2px 4px;
           color:#f00;
           tansition:1s;
           -o-tansition:1s;
           -moz-tansition:1s;
           -webkit-tansition:1s;
           -ms-tansition:1s;
           text-decoration:none;
           font-style:oblique; 
    }
  11. Klik Simpen Template (Save Template).

Katerangan/Catetan :
  • KODE a:hover cinekna saeutik di handapeun KODE <head>
  • Lamun mikahayang background-image anu benten,ganti wae URL kalawan URL ti gambar anu sanes.
  • color = warna font.
  • obligue bisa digantikan dengan normal, italic atawa inherit.

Mangga oge buka Tutorial sejen nu narik pisan sarta pantes di turutan kabeh. Akses ngaliwatan link handap ieu :



Update » Senin PAHING, January, 09, 2012

» BEWARA SUNDA - mitrabewarasunda «