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

Menghilangkan Navbar Pada Template Blogger



Hai teman, apa kabar ?. Kali ini saya akan memberikan artikel tentang menghilangkan navbar(navigation bar) pada blog/template blogger. Cara yang saya berikan ini, tidak perlu menambahkan script CSS ataupun Javascript. Cara yang saya berikan ini hanya perlu menghapus beberapa script. Berikut langkah - langkahnya ..

1. Login blogger anda


2. Masuk kehalaman template



3. Kemudian edit HTML



4. Cari kode <body> atau jika anda menambahkan kode pada kode <body> anda hanya perlu mencari kode <body tidak perlu pakai penutup.


5. Jika sudah ketemu pastikan anda melihat kode dibawah ini dibawah kode <body>

Navbar »
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
      <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;iframes-styles-bubble&quot;, function() {
          if (window.iframes &amp;&amp; iframes.open) {
            iframes.open(
                &#39;//www.blogger.com/navbar.g?targetBlogID\0753361744542332461058\46blogName\75SKINBIGERS\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75http://136-skinbigers.blogspot.com/search\46blogLocale\75in\46v\0752\46homepageUrl\75http://136-skinbigers.blogspot.com/\46vt\75-1035529168598669986&#39;,
                {
                  container: &quot;navbar-iframe-container&quot;,
                  id: &quot;navbar-iframe&quot;
                },
                {
                });
          }
        });
      &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
    </b:widget>
  </b:section>


6. Jika ada, hapus semua script tersebut

7. Simpan template atau pratinjau

Selesai


Jika masih ada navbarnya gunakan cara yang ini. Pada cara ini anda harus memasukan sedikit script CSS
berikut langkah - langkahnya ..

1. Login blogger anda


2. Masuk kehalaman template



3. Kemudian edit HTML

4. Cari kode ]]></b:skin>

5. Masukan script CSS berikut diatas kode ]]></b:skin>

CSS »
#navbar-iframe {
display: none !important;
}

6. Simpan



Semoga Bermanfaat
Readmore »»  

Membuat Sitemap Sederhana Otomatis


Hay teman, pada artikel kali ini saya akan memberikan tutorial membuat sitemap / daftar isi blog otomatis sederhana. Jika anda ingin widgets seperti diatas, ikuti langkah demi langkah berikut ini ...

1. Login blogger anda

2. Pilih blog yang dikelola




3. Masuk ke halaman LAMAN




4. Pilh laman Kosong


5. Pada halaman LAMAN Kosong pilih HTML disebelah Compose



6. Masukan script berikut :

Script »
<script
src="http://daftar-isi-sederhana-ala-nukarierly.googlecode.com/files/daftarisisederhana%20scrif%20java%20Ala%20nuko.txt"></script><br
 /> <script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>



7. Publikasikan


Lihat Hasilnya :




Jika ingin menggunakan scroll maka tambahkan script berikut

<div style="overflow:auto; width:100%; height:300px;">
script sitemap disini
</div>

Selengkapnya sbb :

Script »
<div style="overflow:auto; width:100%; height:300px;">
<script
src="http://daftar-isi-sederhana-ala-nukarierly.googlecode.com/files/daftarisisederhana%20scrif%20java%20Ala%20nuko.txt"></script><br
 /> <script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</div>


Lihat Hasilnya :


Semoga Bermanfaat
Readmore »»  

Membuat Sitemap Otomatis Dengan Style


Hay teman, pada artikel kali ini saya akan memberikan tutorial membuat sitemap / daftar isi blog otomatis dengan style CSS dan Javascript. Jika anda ingin widgets seperti diatas, ikuti langkah demi langkah berikut ini ...

1. Login blogger anda

2. Pilih blog yang dikelola



3. Masuk ke halaman LAMAN




4. Pilh laman Kosong


5. Pada halaman LAMAN Kosong pilih HTML disebelah Compose



6. Masukan script berikut :

Script »
<a href="http://www.blogger.com/blogger.g?blogID=6984301103846628017" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><link href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css"></link><br />
<br />
<script type="text/javascript"><br />
var showNew    = true,<br />
accToc     = true,<br />
    openNewTab = false,<br />
    maxNew     = 10,<br />
    baru       = "new !!",<br />
    sDownSpeed = 600,<br />
    sUpSpeed   = 600;<br />
</script><br />
<br />
<script src="http://my-project-daftari-isi.googlecode.com/files/daftar-halaman.js" type="text/javascript"></script><br />
<br />
<script src="/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


7. Publikasikan

 accToc = true          = untuk membuat sitemap menjadi buka tutup

openNewTab = true = ketika link di klik maka akan membuka tab baru

maxNew = 10          = jumlah artikel baru yang akan ditampilkan

baru = "new !!"         = tulisan yang akan ditampilkan pada postingan baru

sDownSpeed = 600 = kecepatan saat membuka label

sUpSpeed = 600     = saat menutup label

* jika diganti dengan flase maka akan menjadi kebalikannya

Lihat hasilnya :



Semoga Bermanfaat
Readmore »»  

Tombol Back To Top Dengan Effect Jquery

Hay teman, apa kabar ? bagaimana dengan blog anda kurang bagus atau sudah bagus. Pada artikel kali ini saya akan memberikan cara membuat tombol back to top dengan effect jquery. Berikut ini langkah-langkahnya :


1. Login blogger anda

2. Pilih blog yang dikelola



3. Masuk ke halaman tata letak



4. Pilih add gadgets/tambah gadgets



5. Kemudian cari HTML/Javascript, lalu klik +



6. Pada konten masukan script berikut :



Keterangan : 
startline: Integer nilai pixel ke bawah dimana tombol back to top akan dimunculkan. Menambah nilainya berarti tombol akan ditampilkan lebih ke bawah setelah user scroll down. Nilai default di atas adalah 100.
scrollto: Integer, tujuan scroll setelah tombol diklik. Nilai 0 (dalam pixel) seperti default di atas berarti scroll akan kembali ke bagian paling ujung atas (titik nol). Menambah nilainya berarti akan menurunkan titik tujuan scroll.
scrollduration: kecepatan/durasi scroll (dalam miliseconds), semakin tinggi nilainya, semakin lambat. Default adalah 1000 (1 detik).
fadeduration: kecepatan/durasi fading (dalam miliseconds), nilai pertama adalah nilai fade in, yang kedua adalah nilai fade out. Nilai default di atas adalah 500 dan 200.
offsetx: nilai posisi x tombol back to top (dalam pixel), semakin ditambah semakin menjorok ke dalam. Default 5.
offsety: nilai posisi y tombol back to top (dalam pixel), semakin ditambah semakin menjorok ke atas. Default 5.
- Pada tulisan yang berwarna merah ganti dengan alamat url gambar anda.
 7. Simpan



Selesai
Semoga Berhasil dan Semoga Bermanfaat
Readmore »»  

2 Cara Merubah Favicon Blogger

Hay teman, pada artikel kali ini saya akan memberikan bagaimana cara mengganti favicon blogger dengan favicon sendiri. Pada artikel ini ada dua cara untuk mengganti favicon blogger dengan favicon sendiri.

Cara pertama :

1. Login blogger anda

2. Pilih blog yang dikelola



3. Masuk halaman tata letak



4. Cari gadgets favicon jika sudah ada klik edit



5. Klik browse cari gambar favcion anda, max berukuran 100 kb



6. Klik simpan

Jika cara pertama masih gagal pilih cara kedua

Cara kedua :

1. Login blogger anda

2. Pilih blog yang dikelola



3. Masuk halaman template



4. Pilih edit HTML



5. Cari kode <link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>



6. Ubah tulisan YOUR-FAVICON-URL dengan alamat gambar favicon anda

7. Simpan

Selesai

Jika kedua cara masih gagal mungkin template anda bermasalah


Semoga bermanfaat
Readmore »»  

Merubah Warna Teks Saat Di Block


Artikel kali ini saya akan memberikan cara merubah warna teks saat di block. berikut langkah - langkahnya :

1. Login akun blogger anda

2. Pilih blog yang dikelola



3. Kemudian masuk ke halaman template



4. Pilih edit HTML



5. Cari kode ]]></b:skin> agar lebih cepat pencarian tekan tombol CTRL + F



6. Setelah mencari kode tadi copy script dibawah ini tepat diatas kode tadi :



7. Simpan


dan lihat hasilnya



Semoga Bermanfaat



Readmore »»  

Tombol Link Dengan Effect Sudut Halus



Hay sobat blogger bagaimana kabar anda ? baik bukan. Pada artikel kali ini saya akan memberikan tutorial membuat tombol dengan sudut yang tumpul dan halus tanpa background gambar 100% css pasti sobat sudah tidak sabar. Berikut adalah pilihan tombolnya silakan pilih satu atau semuanya.

Button Styles

Modern
 
.modern {
  display: inline-block;
  margin: 10px;
  padding: 8px 15px;
  background: #B8ED01;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  transition: all 0.3s ease-out;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(0,0,0,0.3),
    0 0 4px 1px rgba(0,0,0,0.2);

  /* Font styles */
  text-decoration: none;
  text-shadow: 0 1px rgba(255,255,255,0.7);
}

.modern:hover  { background: #C7FE0A; }
      
     

Modern embossed

.embossed-link {
  box-shadow: 
    inset 0 3px 2px rgba(255,255,255,.22), 
    inset 0 -3px 2px rgba(0,0,0,.17), 
    inset 0 20px 10px rgba(255,255,255,.12), 
    0 0 4px 1px rgba(0,0,0,.1), 
    0 3px 2px rgba(0,0,0,.2);
}

.modern.embossed-link {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(0,0,0,0.3),
    0 0 4px 1px rgba(0,0,0,0.2),
    inset 0 3px 2px rgba(255,255,255,.22), 
    inset 0 -3px 2px rgba(0,0,0,.15), 
    inset 0 20px 10px rgba(255,255,255,.12), 
    0 0 4px 1px rgba(0,0,0,.1), 
    0 3px 2px rgba(0,0,0,.2);
}

.modern.embossed-link:active {
  box-shadow: 
    inset 0 -2px 1px rgba(255,255,255,0.2),
    inset 0 3px 2px rgba(0,0,0,0.12);
}


Modern with socle

.socle {
  position: relative;
  z-index: 2;
}

.socle:after {
  content: "";
  z-index: -1;
  position: absolute;
  border-radius: 6px;
  box-shadow: 
 inset 0 1px 0 rgba(0,0,0,0.1),
 inset 0 -1px 0 rgba(255,255,255,0.7);
  top: -6px; bottom: -6px;
  right: -6px; left: -6px;
  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}


* Cara pemasangan :

1. Login akun blogger anda

2. Pilih blog yang dikelola

3. Masuk Ke halaman Template

4. Edit HTML

5. Cari kode ]]>

6. Copy script css yang anda pilih di dalam kotak paste tepat diatas kode ]]>

7. Simpan


* untuk pemasangan ke link :

1. Buat postingan baru

2. Buka HTML bukan compose

3. Masukan kode berikut

Untuk yang ke 1 :

<a href="#" class="modern">Modern</a>


Untuk yang ke 2:

<a href="#" class="modern embossed-link">Modern embossed</a>


Untuk yang ke 3 :

<a href="#" class="modern socle">Modern with socle</a>



Semoga Bermanfaat
Readmore »»  

Artikel Terkait Pada Postingan Blog


Sebelum mengikuti cara - cara berikut lebih baik anda terlebih dahulu membackup template anda :

Sebelum anda masuk ke halaman edit HTML, klik cadangkan / pulihkan yang berada di pojok kanan atas

kemudian klik unduh template lengkap.

Setelah membackup template anda, silakan ikuti cara - cara berikut :

1. Login akun blogger anda

- Pilih blog yang dikelola
 



2. Pilih Template > Click Edit HTML.

3. Lalu cari kode <data:post.body/> jika menemukan banyak kode tersebut, gunakan kode yang ke-2

4. Copy dan paste kode berikut di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>


5. Kemudian cari kode ]]></b:skin>

6. Copy-paste code CSS berikut ini tepat diatasnya :

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png) no-repeat 0px 0;
margin-left : -10px;padding-top : 0;padding-right : 0px;padding-bottom : 1px;padding-left : 20px;margin-bottom : 5px; line-height : 1em; border-bottom:1px dotted #cccccc;}


7. Simpan Template Anda.



Semoga Berhasil Dan Semoga Bermanfaat


Readmore »»  

Upload Gadgets Flash Ke Blog


Pada artikel kali ini saya akan menerangkan bagaimana cara upload gadgets ke blog :

1. Login akun blogger anda

2. Pilih blog yang dikelola
 

3. Pilih tata letak



4. Tambah gadget /add gadget



5. Pilih HTML/Javascript



6. Pada konten masukan script berikut

<embed src="http://www.fileden.com/files/2013/6/17/3454007/spider.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="250" height="250"></embed>

*ganti teks warna biru dengan alamat gadgets flash berada

7. Simpan


Haslinya :



Semoga Berhasil
Readmore »»  

Kotak Script Dengan Effect Shadow




Hay, sobat blogger bagaimana kabar sobat sekalian ? semoga baik ya. Sekarang saya akan menjelaskan tentang membuat kotak script dengan effect shadow yang keren pastinya sobat blogger sudah tidak sabar lagi kan. nah berikut langkah-langkahnya :

.kotak1{
background:url(http://images2.layoutsparks.com/1/115273/kiss-me-falling-rain.gif) #000000 center no-repeat;
border-radius:15px 0 0 0;
width:400px;
overflow:auto;
color:#555;
height:200px;
padding:10px;
box-shadow:10px 7px 15px #000;
}
.kotak1:hover{
color:#FFFFFF;
cursor:text;
box-shadow:none;
border-radius:0 0 0 15px;
}
widget by Articles


Cara Pemasangan :

1. Buka Blogger Anda

2. Masuk Ke Halaman Template

3. Pilih Edit HTML

4. Centang Expand Template Widget

5. Cari Kode ]]></b:skin>

6. Copy Dan Paste Script Yang Ada Di Kotak Tadi Dan Tempatkan Tepat  Di Atas  Kode ]]></b:skin>

7. Simpan

*jika ingin di ubah lagi kotaknya silakan saja



Good Luck
Readmore »»  

Macam - Macam Effect Teks Berjalan


Kal ini saya akan membahas tentang macam - macam effect teks berjalan (marquee). Ok berikut ini macam - macam scriptnya :

1. <marquee direction="up" > Teks Disini </marquee>

*pada kata direction="up" bisa diganti  dengan down, left, right jadinya akan seperti ini:

<marquee direction="down" > Teks Disini </marquee>

2. <marquee scrollamount="3">Teks</marquee>

*pada angka 3 bisa diganti dengan angka berapa saja, scrollamount untuk mengatur kecepatan. Semakin kecil angka yang diberikan maka akan semakin lambat teks bergerak.

3. <marquee behavior="alternate">Teks</marquee>

*pada kata alternate bisa diganti dengan slide, scroll

- alternate

Teks

- slide
teks

- scroll
Teks


Jika semua script disatukan maka akan seperti ini(dengan scrollamount="3") :


Teks


Sumber : http://zooroos.blogspot.com

Semoga Bermanfaat
Readmore »»  

Script CSS Untuk Mempercantik Input Text

  





Kali ini saya akan memberikan beberapa script css untuk mempercantik input teks : 


Simple



.simple-input {
display: block;
padding: 5px;
border: 4px solid #F1B720;
border-radius: 5px;
color: #333;
transition: all 0.3s ease-out;
}
.simple-input:hover { border-radius: 8px; }
.simple-input:focus {
outline: none;
border-radius: 8px;
border-color: #EBD292;
}





Mac


 

.mac {
display: block;
border: none;
border-radius: 20px;
padding: 5px 8px;
color: #333;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1);
}
.mac:focus {
outline: none;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1),
0 0 5px 1px #51CBEE;
}




Gradient




.depth {
display: block;
border: 1px solid silver;
background: linear-gradient(#eee, #fff);
transition: all 0.3s ease-out;
padding: 5px;
color: #555;
}
.depth:focus {
outline: none;
background-position: 0 -1.7em;
}




Only Line 


 

.line {
display: block;
border: none;
color: #333;
background: transparent;
border-bottom: 1px dotted black;
padding: 5px 2px 0 2px;
}
.line:focus {
outline: none;
border-color: #51CBEE;
}

Sumber : http://zooroos.blogspot.com

Semoga Bermanfaat

Readmore »»  

Kotak Spoiler

1. Login akun blogger anda

2. Pilih blog yang dikelola



3. Pilih tata letak



4. Tambah gadget /add gadget



5. Pilih HTML/Javascript



6. Pada konten masukan script berikut

<div><div style="margin-bottom: 2px;"><b><small>Klik Button / Tombol dibawah ini</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;"> Tulis Disini &lt;/div&gt;
</div></div></div>


7. Simpan

hasilnya akan sperti ini


Welcome To Articles


Good Luck
Readmore »»