11/18/12 ~ rudy cinsnet

Minggu, 18 November 2012

Cinta

01.06 Unknown No comments

Diketika cinta itu tumbuh..........
Derap gelora membahana
Menderu..............
Merasuk sukma

Diketika cinta itu mengembang............
Rasa membara.......
Menghangatkan............
Menuai keindahan

Bikin Menu Dropdown

00.48 Unknown No comments

Bagaimana cara membuat dropdown menu (horizontal)? - Saat ini semakin banyak blogger pemula yang tertarik untuk belajar dasar-dasar kode untuk mengatur tampilan blognya. Jadi kali ini saya hendak berbagi bagaimana cara membuat menu horizontal. Menu ini bisa ditaruh di bawah header, di atas footer, atau di mana saja dalam posisi horizontal.

Lalu bagaimana cara membuat menu dropdown horizontal ini? Untuk praktisnya ikuti prosedur mudah berikut:

Login ke dalam akun blogger anda
Pilih blog yang akan dipasangi
Pilih Menu Template
Klik Tombol EDIT HTML. Setelah itu akan muncul jendela konfirmasi, silahkan klik LANJUTKAN
Carilah kode ]]></b:skin>
Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin> tadi

#RickyMenu {
    background: warna1;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: warna2;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;

}
#Rickybox {
    width: 875px;
    float: left;
    margin: 0;
    padding: 0;
}

#punch {
    margin: 0;
    padding: 0;
}
#punch ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
    color: warna2;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
    background: warna2;
    color: warna1;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
    background: warna1;
    width: 150px;
    color: warna2;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
    background: warna2;
    color: warna1;
    padding: 7px 10px;
}
#punch li {
    float: left;
    padding: 0;
}
#punch li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#punch li ul a {
    width: 140px;
}
#punch li ul ul {
    margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
    left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
    left: auto;
}
#punch li:hover, #punch li.sfhover {
    position: static;
}

Ganti kode warna1 dan warna2 dengan kode warna yang anda inginkan sebagai contoh bisa mengikuti kode di bawah ini:

Menu Hitam
warna1 = #555555
warna2 = #FFFFFF

Menu Biru
warna1 = #66bbdd
warna2 = #004661

Menu Hijau
warna1 = #38761d
warna2 = #FFFFFF

Menu Abu-abu
warna1 = #d4d4d4
warna2 = #555555

Menu Kuning
warna1 = #ffd966
warna2 = #d4812a

Jika sudah mengganti semua kode warna di atas silahkan klik SIMPAN TEMPLATE

Sekarang masuk ke Menu TATA LETAK atau LAYOUT
Klik ADD A GADGET atau TAMBAH GADGET
Pilih HTML/JAVASCRIPT. Biarkan kolom judul nama gadget kosong, lalu copy paste kode di bawah ini ke kolom HTML yang tersedia

<div id="RickyMenu">
       <div id="Rickybox">
      <ul id="punch">
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Sample Page</a>
          <ul>
            <li>
              <a href="#">Sub Page #1</a>
              <ul>
                <li><a href="#">Sub Sub Page #1</a></li>
                <li><a href="#">Sub Sub Page #2</a></li>
                <li><a href="#">Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Page #2</a></li>
            <li><a href="#">Sub Page #3</a></li>
            <li><a href="#">Sub Page #4</a></li>
            <li><a href="#">Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href="#">Sample Post</a></li>
        <li><a href="#">Blog Page</a></li>
      </ul>
    </div>
</div>

Edit semua nama menu sesuai keinginan anda. Jangan lupa mengganti tanda # dengan alamat URL yang anda inginkan
Klik SIMPAN
Atur posisi gadget di tempat yang anda inginkan, lalu klik tombol SIMPAN SETELAN di bagian kanan atas layar.

Jika anda melakukan langkah-langkah di atas dengan benar, anda akan melihat sebuah horizontal dropdown menu di tempat yang anda inginkan. Bentuknya kurang lebih seperti gambar di bawah ini.

Untuk Menambah Menu:

Untuk menambahkan menu silahkan cari pada bagian akhir ada kode seperti ini:

<li><a href="#">Blog Page</a></li>
</ul>

Tepat di bagian atas </ul> bisa disisipkan menu baru, dan akan terlihat seperti di bawah ini:

<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU">TEKS BARU</a></li>
</ul>

Jika menu tambahan lebih dari satu akan terlihat seperti di bawah ini

<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a></li>

<li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>

Jika salah satu menu tambahan mempunyai sub menu, maka perhatikan kode </li> menu tersebut yang diturunkan untuk membuka ruang baru bagi sub menu di dalam menu tersebut

<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>

<li><a href="LINK BARU 2">TEKS BARU 2</a>

        <li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li>

        <li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li>

</li>

<li><a href="LINK BARU n">TEKS BARU n</a></li>
      </ul>

Bikin Navbar Menu Bertingkat

00.47 Unknown No comments

navbar menu bertingkat.................

Oke langsung saja ke cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Cari ]]></b:skin>
Copas Script berikut diatas ]]></b:skin>

#NavbarMenu {
background:#7CA9C0;
height: 30px;
color: $navcolor;
margin: 0 auto 0;
padding: 0;
font: bold 10px Arial, Tahoma, Verdana;
border: 3px solid #699AB8
}
#nav {
width: 100%; float: left;
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: $navcolor;
display: block;
text-transform: uppercase;
margin: 0;
padding: 5px 15px;
font: bold 13px Tahoma, Georgia, Times New Roman;
border-right:0px solid #afcaee;
}
#nav li a:hover, #nav li a:active {
background: #699AB8;
border-top:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
margin-top: 2px;
padding: 5px 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #7CA9C0;
width: 150px;
color: #000;
text-transform: uppercase;
float: none;
margin : 0;
padding: 5px 10px;
border: 1px solid #afcaee;
font: normal 13px Tahoma, Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #699AB8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqapsDszlPWJq41Px86hm2_0f8wI1RzbequjcwdSyW9a76J7-lPbTre-tlZjvCgkWTBp_QADBNsKNKoS5zQnhf1HJeRjfdz2KZgQ3Q-LnE3ehy6iBDM59QCe0G3D-zUsJNkTD6GGDDUxM/s1600/arrow_right.gif) no-repeat right 10px;
border: 1px solid #ccc;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
font-size: 14px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 150px;
}
#nav li ul ul {
margin: -26px 0 0 172px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

Selanjutnya cari <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> [Ini Nama Blog Kawan] sampai </div> yang terakhir
Copas Script berikut dibawahnya setelah </div>

<div id='NavbarMenu'>

<ul id='nav'>

<li><a href='http://blogbego-creation.blogspot.com' title='KEMBALI KE BLOGBEGO CREATION'><img border='0' height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9reXEvRZuM1S93uNr0bvWibr6yoPRAsf_uwmS8yEG0r7sl_LR2MFBRk1eOyvQMZrP3PqbLg76UQ8fKri57dWMGY7JiSgWFHiduQcExtwYxQwR_-iFnD8uPTDaB8fdLD3V0p8FicSEYCA/s200/HOME2.ICO' title='Kembali ke Beranda' width='20'/></a></li>

<li> <a href='#'>MY BLOG</a>

<ul>

<li><a href='http://tips-blogbego.blogspot.com' target='_blank'>TIPS BLOGBEGO </a></li>

<li><a href='http://info-blogbego.blogspot.com' target='_blank'>INFO BLOGBEGO Plus </a></li>

<li><a href='http://blog-renovasi.blogspot.com' target='_blank'>BLOG CREATION </a></li>

</ul></li>

<li> <a href='#'>BLOG DEMO</a>

<ul>

<li><a href='http://blog-bego.blogspot.com' target='_blank'>BLOG BEGO </a></li>

<li><a href='http://melajah-di.blogspot.com' target='_blank'>MELAJAH DI </a></li>

</ul></li>

<li><a href='http://astore.amazon.com/wacc01-20' target='_blank'> AMAZON </a></li>

<li><a href='http://pagespeed.googlelabs.com' target='_blank'> TEST BLOG </a></li>

<li> <a href='#'>Page</a>

<ul>

<li> <a href='#'>Edit Page #A</a>

<ul>

<li><a href='#'>Page #A-1</a>

<ul>

<li><a href='#'>Page #A-1-1</a></li>

<li><a href='#'>Page #A-1-2</a></li>

</ul> </li>

<li><a href='#'>Page #A-2</a></li>

<li><a href='#'>Page #A-3</a></li>

</ul> </li>

<li><a href='#'>Edit Page #B</a></li>

<li><a href='#'>Edit Page #C</a></li>

<li><a href='#'>Edit Page #D</a></li>

<li><a href='#'>Edit Page #E</a></li>

</ul></li>

</ul></div>

Atau kawan bisa menyimpannya pada Gadget, caranya : Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript
Silahkan Ganti URL Blog saya dengan URL kawan
Simpan Template / Blog kawan

Cara Buat Menu Navbar

00.45 Unknown No comments

cara buat menu navbar....................................

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

#navbar-iframe {
  height:0px; visibility: hidden; display: none;
}

Keterangan:

Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .

/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 0px auto;
}

.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}

.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}

.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}

.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}

Keterangan:

Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4UTQEpdK0N6OPJaywv3AAV25RVwCYMKWVbsnYTp9lqmvJaN5x_Rhc-qA8MoFd3InqUAD7QbtfrlvX8yeQLIsp61jQOh3YYZ0Vlp3haLPsgou5fYmK7lIhFC7V7-Z3L8SNEgAIbDs-kxc/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

Keterangan:

Ganti http://eltelu.blogspot.com/ dengan URL blog Anda dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.

Kelima, simpan template.

Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.

Semoga berguna dan bermanfaat.

Salam.

Sumber: http://eltelu.blogspot.com/2012/09/cara-membuat-tab-menu-horizontal.html#ixzz2BhRSmogD

Mengubah Model Bidang Posting

00.41 Unknown No comments

Beranda > How To > Tutorial > Cara Mengubah Desain Tampilan Blog Untuk Model Bidang Artikel Halaman Beranda

ELTELU - Headline Artikel Pada Beranda Blog Versi Web

Pernahkah Anda mencermati desain (model) bidang posting (artikel) yang digunakan pada halaman beranda blog ini? Model bidang posting yang digunakan untuk halaman beranda blog ini bisa jadi lain daripada yang lain karena memang telah dilakukan kustomisasi, dalam hal ini adalah dengan menjadikan bidang artikel paling atas sebagai headline dan bidang artikel yang lainnya didesain sedemikian rupa sehingga ukurannya menjadi lebih ringkas (termasuk diantaranya adalah dengan menampilkan pratinjau dari gambar yang terdapat dalam artikel pada bagian sebelah kiri serta ringkasan artikel di bagian yang berbeda, seperti yang tampak pada gambar di atas).

Uraian dalam artikel ini sendiri sebenarnya merupakan kelanjutan dari uraian dalam artikel sebelumnya yang berjudul “Cara Membuat Headline Artikel Di Beranda Blog Tampilan Versi Seluler”. Dimana apabila uraian dalam artikel tersebut menjelaskan cara atau teknik yang digunakan untuk membuat headline artikel pada beranda blog tampilan versi mobile, maka teknik yang diuraikan dalam artikel ini adalah digunakan untuk membuat headline artikel untuk tampilan blog versi web.

Dan kiranya tak perlu panjang lebar, sekarang kita langsung saja pada pokok pembahasan yaitu mengenai cara mengubah model bidang posting untuk halaman beranda blog versi web. Untuk mengimplementasikan teknik ini, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut secara berurutan.

Pertama, backup template Anda dan kemudian buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua, cari kode </head> dan kemudian sisipkan rangkaian kode berikut ini tepat di atasnya.

<script type='text/javascript'>
//<![CDATA[
/************************************************
Kustomisasi Model Bidang Posting Blogger/Blogspot
Membuat Headline Artikel Di Halaman Beranda Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
*************************************************/
function HapusTagHTML(kalimat,ambil){
  if(kalimat.indexOf("<")!=-1)
  {
    var s = kalimat.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);
        }
      }
    kalimat = s.join("");
  }
  ambil = (ambil < kalimat.length-1) ? ambil : kalimat.length-2;
  while(kalimat.charAt(ambil-1)!=' ' && kalimat.indexOf(' ',ambil)!=-1) ambil++;
    kalimat = kalimat.substring(0,ambil-1);
  return kalimat+'...';
}

function BuatRingkasanArtikel(pID){
  var div = document.getElementById(pID);
  var JumlahKarakter = 300;
  var RingkasanArtikel = '<div>' + HapusTagHTML(div.innerHTML,JumlahKarakter) + '</div>';
  div.innerHTML = RingkasanArtikel;
}
//]]>
</script>

Keterangan:

Kode tersebut digunakan untuk membuat ringkasan artikel yang ditampilkan pada bidang posting kedua, ketiga, dan seterusnya, seperti yang tampak pada gambar (di atas) dengan tanda angka 2 (dua).

Untuk menentukan jumlah karakter yang dijadikan sebagai ringkasan artikel, dapat dilakukan dengan cara mengubah angka 300 yang terdapat pada kode var JumlahKarakter = 300; sesuai dengan jumlah karakter yang diinginkan.

Ketiga, cari kode <b:includable id='main' var='top'> dan kemudian hapus seluruh rangkaian kode untuk bagian tersebut. Sebagai contoh perhatikan rangkaian kode di bawah ini.

<b:includable id='main' var='top'>   <!-- hapus dari sini -->

  ----- rangkaian kode -----

</b:includable>   <!-- hapus sampai sini -->

Keempat, salin rangkaian kode berikut ini dan kemudian sisipkan di bagian yang sebelumnya telah dihapus dengan menggunakan langkah ketiga.

<b:includable id='main' var='top'>
  <b:if cond='data:mobile == &quot;false&quot;'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
        <!--artikel terbaru -->
        <b:include name='artikelterbaru'/>
      <b:else/>
        <!--artikel terlama -->
        <b:include name='artikelterlama'/>
      </b:if>
    </b:loop>

    <!-- navigation -->
    <b:include name='nextprev'/>

    <!-- feed links -->
    <b:include name='feedLinks'/>

    <b:if cond='data:top.showStars'>
      <script src='//www.google.com/jsapi' type='text/javascript'/>
      <script type='text/javascript'>
        google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
          function initialize() {
            google.annotations.setApplicationId(<data:top.blogspotReviews/>);
            google.annotations.createAll();
            google.annotations.fetch();
          }
        google.setOnLoadCallback(initialize);
      </script>
    </b:if>
  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>

  <b:if cond='data:top.showDummy'>
    <data:top.dummyBootstrap/>
  </b:if>
</b:includable>

<b:includable id='artikelterbaru' var='artikelbaru'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:defaultAdStart/>
      <b:if cond='data:post.isDateStart'>
        <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
      </b:if>
      <b:if cond='data:post.isDateStart'>
        &lt;div class=&quot;date-outer&quot;&gt;
      </b:if>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
      </b:if>
      <b:if cond='data:post.isDateStart'>
        &lt;div class=&quot;date-posts&quot;&gt;
      </b:if>

      <div class='post-outer'>
        <b:include data='post' name='post'/>

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
      </div>

      <b:if cond='data:post.includeAd'>
        <b:if cond='data:post.isFirstPost'>
          <data:defaultAdEnd/>
        <b:else/>
          <data:adEnd/>
        </b:if>
        <div class='inline-ad'>
          <data:adCode/>
        </div>
          <data:adStart/>
      </b:if>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    <data:adEnd/>
  </div>
</b:includable>

<b:includable id='artikelterlama' var='artikellama'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>

    <b:else/>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
          
        <div class='post-outer'>
          <b:include data='artikellama' name='lama'/>

          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <b:if cond='data:post.showThreadedComments'>
              <b:include data='post' name='threaded_comments'/>
            <b:else/>
              <b:include data='post' name='comments'/>
            </b:if>
          </b:if>
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <b:if cond='data:post.showThreadedComments'>
              <b:include data='post' name='threaded_comments'/>
            <b:else/>
              <b:include data='post' name='comments'/>
            </b:if>
          </b:if>
        </div>
      </b:if>
    </b:if>
  </div>
</b:includable>

<b:includable id='lama' var='artikellama'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
        <b:if cond='data:post.link'>
          <div style='text-align: justify;'>
            <a expr:href='data:post.link'><data:post.title/></a>
          </div>
        <b:else/>
          <b:if cond='data:post.url'>
            <b:if cond='data:blog.url != data:post.url'>
              <div style='text-align: justify;'>
                <a expr:href='data:post.url'><data:post.title/></a>
              </div>
            <b:else/>
              <data:post.title/>
            </b:if>
          <b:else/>
            <data:post.title/>
          </b:if>
        </b:if>
      </h3>
    </b:if>

    <div class='post-header'>
      <div class='post-header-line-1'/>
    </div>

    <div class='mobile-index-contents'>
      <b:if cond='data:post.thumbnailUrl'>
        <div class='mobile-index-thumbnail'>
          <div style='border: 1px solid #666666; background: ffffff; float: left; width:180px; height:114px; margin-right:15px;'>
            <div class='Image' style='float:left; '>
              <img expr:src='data:post.thumbnailUrl' style='width:180px; height:114px;'/>
            </div>
          </div>
        </div>
      <b:else/>
        <div style='border: 1px solid #666666; background: ffffff; float: left; width:180px; height:114px; margin-right:15px;'>
          <img alt='eltelu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBolieXuJSwzI4rXPuUnrEUCjujRk_0ilhKQNhFQ5u1HrlGqgBhiGJOFNvBGPBrkaTTKwiOHyxLCtSghkLyn9A0QlPeKj4KJQg87Ihka5gSOCvHEoHaW-muRkjmP7YgeegI0wYc3hLuXA/s800/ELTELU.png' style='width: 180px !important; height: 114px !important;'/>
        </div>
      </b:if>

      <div class='post-body' style='text-align: justify;'>
        <div expr:id='&quot;RingkasanArtikel&quot; + data:post.id'><data:post.body/></div>
        <script type='text/javascript'>BuatRingkasanArtikel(&quot;RingkasanArtikel<data:post.id/>&quot;);</script>
      </div>

      <b:if cond='data:post.hasJumpLink'>
        <div style='border-bottom: 1px solid #666666; margin-top: 12px; width: 99,99%;'/>
          <div style='text-align: right;'>
            <div class='jump-link'>
              <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
            </div>
          </div>
        <div style='clear: both;'/>
      </b:if>
    </div>
  </div>
</b:includable>

Keterangan:

Pemisah artikel yang digunakan dalam rangkaian kode di atas adalah pemisah standar, yaitu <data:post.jumpText/> yang akan menghasilkan tautan teks berupa “Baca selengkapnya »” atau “Read more »”. Sehingga apabila sebelumnya Anda telah melakukan kustomisasi untuk bagian tersebut (sebagai contoh misalnya mengubah bagian tersebut menjadi gambar tombol), maka gantilah pula <data:post.jumpText/> yang terdapat pada kode di atas sesuai dengan rangkaian kode yang Anda gunakan (sebelumnya) untuk membuat tombol “Read more »”.

Silakan buka artikel dengan judul “Membuat Tombol Read More Tanpa Ribet” yang dapat Anda gunakan sebagai referensi untuk membuat tombol “Read more »” atau mengganti tautan teks “Baca selengkapnya »” dengan gambar berbentuk tombol.

Kelima, simpan template.

Dan selanjutnya perlu diketahui bahwa setelah Anda mengimplementasikan teknik tersebut maka post footer untuk artikel kolom kedua, ketiga, dan seterusnya secara otomatis tidak lagi ditampilkan ketika halaman yang dibuka adalah beranda. Namun post footer akan tetap dimunculkan sebagaimana mestinya ketika masing-masing artikel pada blog yang dimaksud dibuka.

Sementara itu post footer untuk artikel yang terletak pada bagian kolom paling atas akan tetap ditampilkan di halaman beranda, sehingga untuk menghilangkan bagian tersebut agar post footer tidak lagi tampil di halaman beranda seperti halnya pada artikel bagian kolom kedua, ketiga, dan seterusnya, maka Anda dapat mengerjakan teknik yang diuraikan dalam artikel dengan judul “Menyembunyikan Elemen Halaman Posting Dari Beranda Blog”.

Semoga berguna dan bermanfaat.

Salam.

Sumber: http://eltelu.blogspot.com/2012/09/cara-mengubah-desain-tampilan-blog.html#ixzz2BhTBlik6

Bikin Bingkai dan Warna Widget

00.36 Unknown No comments

buat bingkai dan warna widget..................

Sobat, seperti kita tahu bahwasanya hampir semua template standar yang disediakan oleh Blogger tidak menyertakan aksesori berupa bingkai untuk setiap widget yang dipasang di halaman. Dan hal ini sangat berbeda apabila dibandingkan dengan kustom template yang umumnya menyertakan aksesori berupa bingkai untuk bagian tersebut, sehingga tampilan halaman blog yang yang menggunakan template standar Blogger menjadi terkesan tidak lebih menarik apabila dibandingkan dengan blog yang menggunakan kustom template.

Namun demikian bukan berarti kita tidak dapat melakukan kustomisasi pada template standar Blogger agar tampilannya menjadi lebih menarik bila dibandingkan dengan kustom template. Oleh sebab itulah dalam artikel sebelumnya yang berjudul “Inilah Beberapa Daftar Template Blog Terbaik Yang Pernah Ada” saya menyebutkan bahwa sebenarnya template standar yang disediakan oleh Blogger merupakan template blog terbaik yang pernah ada untuk platform Blogger (Blogspot), dengan salah satu alasannya yaitu karena kemudahan bagi kita bila ingin melakukan kustomisasi.

Salah satu dari kemudahan kustomisasi yang dapat kita lakukan adalah ketika kita ingin memodifikasi desain tampilan untuk setiap elemen halaman, termasuk diantaranya yaitu modifikasi widget dengan cara menambahkan bingkai dan warna latar untuk bagian tersebut. Dimana kustomisasi dapat dilakukan dengan menambahkan kode CSS tertentu ke dalam template untuk menggantikan kode CSS standar yang diberikan oleh Blogger.

Nah, dalam hal melakukan kustomisasi untuk bagian widget, dalam hal ini adalah memberi garis dan warna latar untuk bagian tersebut, maka Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya.

.main-inner .sidebar .widget h2 {

  margin-top: 0px;

  margin-bottom: 1px;

  margin-left-value: 0px;

  margin-right-value: 0px;

  padding: 3px 3px;

  color: #274e13 !important;

  text-align: center;

  border: 1px solid #666666;

  border-radius: 4px;

  box-shadow: 1px 1px 6px 1px #3d85c6;

  background: #bbbbbb;

}

.main-inner .sidebar .widget-content {

  margin: 0px;

  padding: 2px 2px;

  text-align: justify;

  text-decoration: none;

  border: 1px solid #674ea7;

  border-radius: 4px;

  box-shadow: 1px 1px 6px 1px #3d85c6;

  background: #ffffff;

}

.main-inner .widget #ArchiveList {

  margin: 0px;

}

.main-inner .widget ul, 

.main-inner .widget li,

.main-inner .widget ul li,

.main-inner .widget #ArchiveList ul.flat li {

  margin: 0px;

  padding: 2px;

  list-style: none;

}

Ketiga, simpan template Anda.

Perlu diketahui bahwa background yang digunakan dalam rangkaian tersebut merupakan warna solid (dalam hal ini adalah #bbbbbb dan #ffffff), sehingga agar tampilannya menjadi seperti gambar di atas maka Anda dapat mengganti kode warna pada background: dengan gambar atau warna gradasi. Sebagai contoh misalnya dengan memakai kode di bawah ini.

Background dengan menggunakan gambar (misalnya untuk judul widget).

background: url("https://lh6.googleusercontent.com/-H-0CmGKOwSg/T_GubudWV2I/AAAAAAAAAPI/SYKtH9zZlXA/s800/Menu.png") repeat-x scroll left bottom rgb(243, 244, 246);

Background dengan menggunakan warna gradasi (misalnya untuk area widget).

background: -moz-linear-gradient(center top , white 20%, rgb(243, 243, 243) 100%) repeat scroll 0% 0% transparent;

Demikian halnya untuk warna garis dan warna bayang-bayang, Anda dapat menyesuaikannya dengan desain tampilan halaman blog yang Anda kelola, yaitu dengan cara mengganti kode warna yang terdapat pada border: dan box-shadow:. Dan perlu diketahui pula bahwa kode tersebut dapat diimplementasikan pada semua kategori template standar Blogger (Mudah, Jendela Gambar, PT Keren Sekali, Tanda Air, Kelembutan, dan Perjalanan). Terkecuali untuk kategori template PT Keren Sekali, kode tersebut hanya dapat diterapkan pada desain template yang belum memiliki bingkai pada bagian widget. Karena apabila diimplementasikan pada template dalam kategori PT Keren Sekali yang telah memiliki bingkai pada widget, maka tampilannya malah akan menjadi tidak proporsional.

Semoga berguna dan bermanfaat.

Salam.

Sumber: http://eltelu.blogspot.com/2012/07/cara-membuat-bingkai-dan-mengubah-warna.html#ixzz2BhUKyhiX

rudy cinsnet

Recent Posts

Categories

Texts

Download

About me

Followers

Minggu, 18 November 2012

Cinta

Bikin Menu Dropdown

Bikin Navbar Menu Bertingkat

Cara Buat Menu Navbar

Mengubah Model Bidang Posting

Beranda > How To > Tutorial > Cara Mengubah Desain Tampilan Blog Untuk Model Bidang Artikel Halaman Beranda

Bikin Bingkai dan Warna Widget

Total Pageviews

Postingan Populer

facebook

Blog archives

Share