Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

105
Tgl. 07 November 2012

Cara Mengganti Desain Halaman Blog Yang Dihasilkan Oleh Penggunaan Template Standar

Teknik yang diuraikan dalam artikel ini merupakan versi kedua dari uraian yang terdapat dalam artikel sebelumnya dengan judul ’ Cara Membu...

Model Beranda Blog Yang Terdiri Dari Beberapa Kolom Posting
Teknik yang diuraikan dalam artikel ini merupakan versi kedua dari uraian yang terdapat dalam artikel sebelumnya dengan judul ’Cara Membuat Headline Artikel Di Beranda Blog Tampilan Versi Seluler’ dan juga uraian teknik dalam artikel yang berjudul ‘Cara Mengubah Desain Tampilan Blog Untuk Model Bidang Artikel Halaman Beranda’. Bilamana pada artikel tersebut telah diuraikan cara yang digunakan untuk mengubah desain tampilan halaman blog, dalam hal ini adalah mengubah model bidang posting serta menambahkan sebuah kolom headline untuk posting artikel yang ditampilkan di beranda, maka maksud dan tujuan dari penggunaan teknik yang diuraikan dalam artikel ini adalah untuk membuat kolom posting menjadi beberapa bagian seperti yang tampak pada gambar di atas.

Seperti yang telah kita ketahui bersama bahwa apabila kita menggunakan template standar Blogger, maka artikel yang diposting akan ditampilkan secara urut dari atas ke bawah sesuai dengan tanggal penerbitannya. Dan seperti itu pula lah setelan default yang biasanya digunakan pada kustom template. Namun demikian bisa jadi Anda pernah mendapati sebuah blog yang menggunakan kustom template memiliki desain tampilan halaman beranda yang berbeda, dalam hal ini artikel tidak ditampilkan secara urut dari atas ke bawah akan tetapi ditampilkan dalam beberapa kolom seperti yang tampak pada gambar di atas. Dengan membagi kolom posting menjadi beberapa bagian (seperti yang tampak pada gambar di atas), maka artikel yang ditampilkan di halaman beranda tampak lebih ringkas dan jumlah artikel yang dapat ditampilkan pun menjadi lebih banyak.

Berbicara mengenai desain tampilan halaman beranda blog, pada dasarnya template standar yang disediakan oleh Blogger juga dapat dimodifikasi sedemikian rupa sehingga dapat menampilkan artikel dalam beberapa kolom posting seperti halnya model kolom posting yang digunakan pada beberapa macam kustom template. Dimana untuk menjadikan desain tampilan halaman yang dihasilkan oleh penggunaan template standar Blogger menjadi demikian, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah di bawah ini secara berurutan.

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

Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.
/***************************************************
Mengubah Kolom Posting Yang Dihasilkan Oleh Template
Standar Blogger Menjadi Beberapa Bagian Yang Sama
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
****************************************************/
.bidang-utama {
  width: 100%;
  height: auto;
  padding: 0px;
  margin: 0px;
}

.bidang-artikel {
  float: left;
  width: 50%;
  height: auto;
  padding: 0px;
  margin: 0px;
}

.kotak-artikel {
  height: auto;
  min-height: 144px;
  padding: 10px;
  margin: 5px;
  border: 1px solid #DBDBDB;
}

.kotak-judul {
  width: 96%;
  height: 30px;
  padding: 5px;
  margin-bottom: 5px;
  text-align: justify;
  overflow: hidden;
  border: 1px solid #f3f3f3;
  font: bold 13px Arial;
  background: #F5F5F5;
  background: -moz-linear-gradient( center top, #f9f9f9 20%, #F5F5F5 100% );
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f9f9f9), color-stop(1, #F5F5F5) );
}

.kotak-gambar {
  float: left;
  width: 90px;
  height: 95px;
  margin-right: 10px;
  border: 1px solid #f3f3f3;
  border-radius: 3px;
  overflow: hidden;
}

.kotak-gambar img {
  width:90px !important;
  height:95px !important;
}

.kotak-ringkasan {
  max-height: 70px;
  min-height: 70px;
  text-align: justify;
  font: 11px Arial;
  overflow: hidden;
}

.garis-batas {
  padding-top: 5px;
  width: 100%;
  border-bottom: 1px solid #f3f3f3;
}

.baca-selengkapnya {
  text-align: right;
}

.baca-selengkapnya a {
  display: inline-block;
  margin: 0;
  padding: 2px 2px;
  border: 1px solid #f3f3f3;
  text-align: center;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #F5F5F5;
  background: -moz-linear-gradient( center top, #f9f9f9 20%, #F5F5F5 100% );
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f9f9f9), color-stop(1, #F5F5F5) );
  font: 11px Arial;
}

.baca-selengkapnya a:hover {
  background: #f9f9f9;
  background: -moz-linear-gradient(center top, #F5F5F5 20%, #f9f9f9 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #F5F5F5),color-stop(1, #f9f9f9));
}

Keterangan:
Apabila warna garis, background, efek hover, serta ukuran maupun model huruf yang dihasilkan oleh rangkaian CSS di atas belum sesuai dengan desain tampilan halaman blog yang Anda kelola, maka silakan dilakukan kustomisasi seperlunya.

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 -->

Keterangan:
Jika sebelum ini Anda telah mengimplementasikan atau menerapkan teknik yang diuraikan dalam artikel dengan judul ‘Cara Mengubah Desain Tampilan Blog Untuk Model Bidang Artikel Halaman Beranda’, maka cari dan kemudian hapus seluruh rangkaian kode yang digunakan pada langkah kedua serta langkah keempat artikel tersebut, karena rangkaian kode yang dimaksud sudah tidak diperlukan dan tidak digunakan lagi apabila menerapkan teknik yang diuraikan dalam artikel ini.

Keempat, salin rangkaian kode berikut ini dan kemudian sisipkan di bagian yang sebelumnya telah dihapus dengan menggunakan langkah ketiga di atas.
<b:includable id='main' var='top'>
  <b:if cond='data:mobile == &quot;false&quot;'>

    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
          <b:if cond='data:blog.homepageUrl != data:blog.url'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <b:if cond='data:blog.pageType != &quot;item&quot;'>
                <b:include name='kolom-posting'/>
              <b:else/>
                <b:include name='full-artikel'/>
              </b:if>
            <b:else/>
              <b:include name='full-artikel'/>
            </b:if>
          <b:else/>
            <b:include name='kolom-posting'/>
          </b:if>
        <b:else/>
        </b:if>
      </b:loop>
    </div>
  
    <!-- 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='kolom-posting'>
<div class='date-outer'>
  <div class='post-outer' style='padding: 0px; margin: 0px; height: auto; overflow: hidden;'>
    <div class='bidang-utama'>
      <b:loop values='data:posts' var='post'>
        <div class='bidang-artikel'>
          <div class='kotak-artikel'>  
            <a expr:name='data:post.id'/>
            <div class='kotak-judul'>
              <b><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b><br/>
            </div>
            
            <b:if cond='data:post.thumbnailUrl'>
              <div class="kotak-gambar">
                <a expr:href='data:post.url' title='Klik untuk membuka artikel.'><img alt='Gambar' expr:src='data:post.thumbnailUrl'/></a><br/>
              </div>
            <b:else/>
              <div class='kotak-gambar'>
                <a expr:href='data:post.url' title='Klik untuk membuka artikel.'><img alt='Gambar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtz6J6fAeCikK3PhIRJmOcLm5ntM4gU-5AhLQmpC-aKBrqZptWe58AGLOAVHfRCFRTIq47r41_j8M3h4VRnRjFaB6gGi1ZAk6JE3IyJ1VuT6ZAifbBYhCMbbneIE4bN0G_4JBmjMzZuY/s800/ELTELU.png'/></a><br/>
              </div>
            </b:if>
            
            <b:if cond='data:post.snippet'>
              <div class='kotak-ringkasan'>
                <data:post.snippet/>
              </div>
            <b:else/>
              <div class='kotak-ringkasan'>
                
              </div>            
            </b:if>      
            
            <div class='garis-batas'/>
            
            <div class='baca-selengkapnya'>
              <b><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></b>
            </div>
            
          </div>
        </div>
      </b:loop>
    </div>
  </div>
</div>
</b:includable>

<b:includable id='full-artikel'>
  <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/>
</b:includable>


Kelima, lakukan pratinjau (preview) untuk tampilan akhir yang akan didapatkan dan apabila hasilnya telah sesuai dengan harapan maka simpan template Anda.

Setelah template disimpan maka model bidang posting yang ditampilkan di halaman beranda tidak lagi urut sesuai dengan tanggal penerbitan artikel dari atas ke bawah, namun akan berubah menjadi beberapa kolom artikel seperti yang tampak pada gambar di atas. Dan kemudian perlu diketahui bahwa apabila teknik yang diuraikan dalam artikel ini dikerjakan dengan benar, maka teknik tersebut dapat diimplementasikan secara aman pada semua kategori template standar yang disediakan oleh Blogger.

Namun demikian apabila dalam penerapannya Anda mengalami kesulitan, maka silakan ajukan pertanyaan mengenai kesulitan yang Anda alami ketika mengimplementasikan teknik tersebut dengan cara mengeposkan komentar dalam artikel ini.

Semoga berguna dan bermanfaat.
Salam.



Katagori: , ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 105 komentar pada artikel ini ▶
Anonim
07/11/12, 18.00 O

Maaf bang ane muncul lagi ni, maaf juga ane bawel & banyak nanya. Ane cuma mau nanya cara bikin hedline dan ada beberapa yang menyerupai tampilan seluler yang contohnya pada tabnya bertuliskan "HEADLINE" dan "DAFTAR PILIHAN ARTIKEL" kaya punya abang ini gimana caranya bang? ane kurang paham bang, maklum masih newbie.
Terimakasih untuk jawabannya.

Anonim
07/11/12, 18.51 O

mas cara buat artikel terkait didepan halam gimana.... tolong kasih scriptnya bang heee

Anonim
07/11/12, 19.27 O

mas mau nanya lagi bisa gak artikelnya didalam kotak bisa ditambah..mana yang harus diedit biar gak kosong dibawahnya coba lihat blog aku mas..makasih sebelumnya ngerepotin

08/11/12, 00.07 O

@Bun78Gak apa-apa Sob. Saya malah senang menerima pertanyaan dari Sobat, karena hal yang seperti ini menurut saya merupakan suatu respon yang sangat positif.

Oh ya, terkait dengan hal yang Sobat tanyakan saya memang sengaja akan menerbitkan artikelnya secara berkala. Hal ini disebabkan karena antara kategori template yang satu dengan kategori yang lainnya (pada template standar Blogger) memiliki karakteristik yang berbeda. Sehingga jika langsung saya uraikan dalam satu artikel bisa jadi malah akan menjadi rumit dan membingungkan.

Jadi kesimpulannya adalah bahwa di hari-hari mendatang saya akan menerbitkan beberapa artikel lagi sebagai kelanjutan dari artikel ini.

Sekian dan semoga dapat dipahami. :)

08/11/12, 00.11 O

@mencintai dengan sederhanaUntuk membuat artikel terkait kategori atau label tertentu di halaman bagian depan, saya rasa dapat dilakukan langsung dengan cara menggunakan feed widget yang telah disediakan oleh Blogger, Sob.

08/11/12, 00.29 O

@mencintai dengan sederhanaApabila yang Sobat maksud adalah ringkasan artikel yang terdapat dalam kotak, maka jawabannya adalah bisa. Tapi tentu saja harus dilakukan penambahan JavaScript seperti yang digunakan dalam artikel sebelumnya yang berjudul Cara Mengubah Desain Tampilan Blog Untuk Model Bidang Artikel Halaman Beranda

Namun demikian dengan penggunaan cara seperti itu menurut saya kurang efektif, karena akan memperberat loading halaman apalagi bila jumlah artikel yang ditampilkan cukup banyak


Lantas kenapa kok bagian yang kosong pada kotak artikel terlalu lebar? Hal tersebut terjadi karena Sobat melakukan perubahan angka yang terlalu besar pada bagian berikut ini:

.kotak-artikel {
height: auto;
min-height: 350px;
padding: 10px;
margin: 5px;
border: 1px solid #7CFC00;
}

Nah, coba perhatikan angka pada bagian yang tecetak tebal dalam rangkaian CSS di atas. Optimalnya angka pada bagian tersebut adalah 144px, sehingga tidak terjadi adanya ruang kosong pada bidang artikel.


Akan tetapi setelah bagian tersebut diubah menjadi 144px, bisa jadi masalah berikutnya adalah adanya ruang kosong yang cukup lebar di bawah tombol navigasi. Sehingga untuk mengatasi hal ini solusinya adalah menambah jumlah artikel yang ditampilkan di beranda, yaitu dengan cara mengubah setelannya melalui menu Setelan -- Pos dan komentar dan kemudian ganti jumlah posting yang ditampilkan di laman utama dari 12 buah menjadi 24 buah artikel.

Sekian dan semoga dapat membantu. :)

Anonim
08/11/12, 06.45 O

AYAHE MELA udah diubah apa yang ayah mela sarankan tetap aja gak ada prubahan hee

08/11/12, 09.29 O

@mencintai dengan sederhanaHwaduh, maksud saya script yang dipakai tidak sama persis dengan script dalam artikel sebelumnya, Sob.

Tapi maksud saya adalah hanya menambahkan JavaScript yang dipakai untuk membuat ringkasan artikelnya saja.

Namun tentunta hal tersebut tidak dapat langsung dilakukan begitu saya, karena sudah tentu harus dilakukan perubahan pada rangkaian kode yang digunakan. :)

08/11/12, 11.43 O

mas saya mau tanya dong...
cara menghapus Daftar Laman di bloger gmn ya mas.. rencananya daftar laman tersebut mau saya ganti dengan menu drop down...

makasih mas...

08/11/12, 12.48 O

mau nanya gimana cranya bikin judul panjang gitu ya..??

Anonim
08/11/12, 14.50 O

AYAHE MELA aku mengunakan template Cara Mengubah Desain Tampilan Blog Untuk Model Bidang Artikel Halaman Beranda

readmorenya gak adanya dibawah

08/11/12, 15.27 O

@mencintai dengan sederhanaJujur saja kalau begini saya jadi bingung, Sob. Sebab pertanyaan Sobat seakan berputar-putar.

Jadi begini, perlu diketahui bahwasanya teknik dalam artikel ini tidak dapat dicampur dengan teknik yang sebelumnya. Kalaupun digabung maka tentunya harus dilakukan perubahan pada script yang digunakan.

Sehingga silakan Sobat putuskan untuk menggunakan salah satu saja dari kedua teknik tersebut agar tidak membingungkan.

CMIIW

08/11/12, 15.30 O

@iy sehatiTerkait dengan hal tersebut, silakan Sobat buka artikel berikut ini:

Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger

Sekian dan semoga dapat membantu. :)

08/11/12, 15.35 O

@Madejulius VinkaApabila yang Sobat maksud adalah judul artikel seperti yang tampak di bawah tanggal posting, maka silakan buka artikel di bawah ini.

Cara Membuat Menu Navigasi Breadcrumb Pada Judul Artikel Dengan Menampilkan Beberapa Label Sekaligus

Sekian dan semoga dapat membantu. :)

09/11/12, 20.01 O

Selamat malam sobat, apa kabar? maaf saya mahu tanya. bagaimana jika tampilan halaman seperti gambar diatas diubah secara vertikal saja dengan menambahkan 1 kotak ke samping kanan lagi, sehingga menjadi 3 kotak. saya mahu terapkan pada blog ini

bengkelblogg

sehingga nantinya template pada blog yang sudah saya kelola sebelumnya mahu di ganti. Trima kasih. Salam

10/11/12, 08.43 O

@Kraeng Francisco Untuk keperluan tersebut (dalam hal ini adalah menjadikan kolom posting menjadi 3 (tiga) kotak yang sama, maka Sobat dapat melakukan perubahan ukuran pada beberapa bagian CSS di atas.

Bagian yang dimaksud diantaranya adalah sebagai berikut:

mengubah height: 30 px; yang terdapat pada .kotak-judul { menjadi menjadi height: 60px; serta mengubah width: 50%; yang terdapat pada .bidang-artikel { menjadi width: 33.3%;

Semoga dapat membantu. :)

10/11/12, 18.49 O

Trima kasih untuk jawabannya sahabat. maaf saya sedikit salah memahami seperti yang sudah dijelaskan sebelumnya oleh sobat. Saya pikir bidang posting pertama masih muncul ternyata sudah tidak lagi dimunculkan setelah saya mencoba teknik yang diuraikan diatas. Sangat bagus dipandang Sobat....untuk sementara saya masih edit kembali pada template blog yg saya kelola. skli lagi Terima kasih.

12/11/12, 16.45 O

@Kraeng FranciscoYap... Sama-sama Sobat.

12/11/12, 18.15 O

info yang menarik dan bermanfaat sobat, salam sukses.

12/11/12, 19.26 O

@mariyanto widodo Terimakasih dan salam sukses balik Sobat. :)

13/11/12, 08.54 O

Numpang Copas ADMIN Buat berbagi ilmu
http://www.inidia.nl.ae/

13/11/12, 16.17 O

@fajar HWSilakan Sob. Saya rasa tidak apa-apa selama masih sesuai dan atau tidak melanggar ketentuan dan kebijakan blog ini serta ketentuan lisensi Creative Commons Attribution.

14/11/12, 12.56 O

tapi templatenya menghapus bread crumbs standard template saya bro, gmana nih?

14/11/12, 16.21 O

@Dedy MurmanBila trnyata terjadi hal yang demikian, maka Sobat dapat menemukan solusinya dengan cara membuka artikel berikut ini:

Cara Membuat Menu Navigasi Breadcrumb Pada Judul Artikel Dengan Menampilkan Beberapa Label Sekaligus

Semoga dapat membantu. :)

15/11/12, 20.19 O

terima kasih artikelnya mantap kang mas...

16/11/12, 00.16 O

@nendy algozyTerimakasih balik atas kunjungan dan berkenannya mengeposkan komentar dalam artikel ini, Sobat.

18/11/12, 18.11 O

bung ayahe terima kasih atas kunjungan baliknya ke blog saya, sekarang saya mau tanya lagi nih, bagaimana cara menambahkan tampilan kotaknya agar bisa tampil lebih dari 7 kotak?, tks atas infonya sob

18/11/12, 19.56 O

@Dedy MurmanApabila yang Sobat maksud adalah agar tampilan beranda menjadi seperti tampilan beranda blog ini, maka dalam waktu dekat saya akan menerbitkan artikel terkait dengan hal tersebut. :)

22/11/12, 17.01 O

Sobat mohon koreksi saya sudah menerapkan teknik ini...kemuadian antara halaman beranda blog antara kotak sidebar dengan posting mungkin terlalu jauh jaraknya ya?

Coba lihat sobat karena sementara saya belum ganti untuk dikoreksi ulang, apabila ada kesalahan mohon infonya sob.

Teriama kasih

23/11/12, 05.57 O

@Kraeng FranciscoCoba nanti saya analisa dulu Sob, karena ada beberapa bagian yang perlu dilakukan penyesuaian.

23/11/12, 20.00 O

Bro Ayahe, ane tunggu nih artikel nya...pengen banget ngerubah desain tampilan blog ane, oh iya blog ane bukan menggunakan template standard yg modif, ane udh join site ini, jika berkenan folback blog ane ya sob, tks

24/11/12, 00.46 O

@Kraeng FranciscoSob, untuk mengatasinya coba tambahkan beberapa CSS di bawah ini:

#main.main.section{
margin: 0px;
}
#sidebar-right-1.sidebar.section {
margin: 0px;
}

.footer-inner {
padding: 5px;
}


Semoga dapat membantu. :)

24/11/12, 02.27 O

Sobat, maaf baru saya cek kembali berhubung internet saya lambat. untuk hasil analisa sobat ternyata benar dan setelah saya menambahkan kode CSS tersebut untuk merubah jarak antara sidebar, halaman posting dan juga footer sudah berhasil dan mengalami perubahan total. Terima Kasih sobat atas bantuannya.

Salam dan Sehat Selalu.

25/11/12, 00.48 O

wah keren neh, mantap...
langsung nyoba dulu yah... :D

25/11/12, 09.41 O

hatur nuhun sob :D
bermanfaat nih

25/11/12, 16.05 O

@Dedy MurmanOke Sob, saya pasti akan menerbitkan artikelnya.

Namun karena beberapa hari ini saya masih terkendala oleh sesuatu dan lain hal, akhirnya sampai kini saya belum dapat menyusun artikelnya.

Oleh sebab itulah hampir 2 (dua) minggu ini saya tidak melakukan posting sama sekali.

Jadi Sobat sabar dulu ya. Nanti kalau artikel sudah saya terbitkan pasti saya akan memberitahukan langsung melalui komentar pada blog yang Sobat kelola. :)

25/11/12, 16.44 O

@Kraeng FranciscoYap, sama-sama. Demikian pula sebaliknya, semoga Sobat juga senantiasa mendapatkan nikmat berupa kesehatan. :)

25/11/12, 18.06 O

@Keiruchan AgathaSilakan :)

25/11/12, 19.28 O

@Hamdan NawawiSama-sama dan terimakasih balik Sobat. :)

27/11/12, 19.53 O

Makasi ya bang infonya, venusblogmovie.blogspot.com

Anonim
29/11/12, 09.57 O

saya ijin nyimak ya kawan. soalnya saya belum berani utak-atik themplate karenah masih baru belajar..hehehe

terimakasih dan salam kenal...

29/11/12, 12.49 O

@Basri MatindasSama-sama Sobat....

30/11/12, 23.53 O

@artabezSilakan Sobat. Terimakasih atas komentar yang diberikan, dan salam kenal balik. :)

Anonim
02/12/12, 11.01 O

wah makasih atas ilmunya ya gan..:)

05/12/12, 04.06 O

@blog-supercoolzzSama-sma dan terimakasih balik atas komentarnya, Sob. :)

12/12/12, 15.37 O

mau nanya nih sob, kalau di blog tidak ada kode , gimana nih?

14/12/12, 17.29 O

@Aditya L PramanaMaksudnya tidak ada kode yang bagaimana Sob?

Barangkali pertanyaannya Sobat perjelas dulu agar saya dapat dengan mudah untuk memahami maksud dari pertanyaan yang Sobat ajukan.

Anonim
16/12/12, 03.29 O

Assalamu'alaikum.

Sebelumnya saya ingin sekali membuat readmore otomatis dgn thumbnail pada postingan sy tp saya kesulitan krn sdh prnah menanamkan kode readmore manual dahulunya, pgn dicopot kmbali dah coba beberapa kali gagal, ganti template yg tersedia readmorex otomatisnya juga tak berhasil. Saya coba tutorial ini, saya sangat puas.

Terima kasih krn telah berbagi. Ini kunjungan pertama saya dan langsung tertarik dgn blog dan posts anda. Jazaakumullahu khrn.

16/12/12, 05.25 O

@tipstrikblogging.comWa'alaikumsalam.

Terimakasih balik Sobat. Saya turut senang apabila teknik yang diuraikan dalam artikel ini dapat diterapkan dengan sukses pada blog yang Sobat kelola.

27/12/12, 22.55 O

terima kasih atas infonya

28/12/12, 09.43 O

Maaf ya, saya komen bawa pertanyaan lagi :(
Coba dong gimana solusinya, tampilan beranda blog saya jadi
seperti ini
maaf ya, template belum saya save, karena saat melihat hasil pratinjau, beranda blog saya tidak seperti beranda blog Eltelu

28/12/12, 23.36 O

@andhy jubairSama-sama Sobat. :)

29/12/12, 00.18 O

@jona rendraSobat, sebenarnya apabila teknik tersebut diterapkan secara runtut dan benar, maka saya dapat memastikan bahwa hasil yang didapatkan akan sesuai dengan yang semestinya.

Namun demikian bila ternyata kasusnya seperti itu, maka cobalah untuk membersihkan cache browser terlebih dulu. Dan pastikan pula bahwa saat melakukan editing template sambungan internet yang Sobat gunakan dalam keadaan yang stabil (normal kecepatannya).

Semoga dapat membantu.

Anonim
31/12/12, 09.47 O

makasih bang nanti saya coba dech.!

01/01/13, 15.29 O

@bayulesmanablogspotSama-sama Sob. Silakan bila ingin mencoba untuk mengimplementasikannya.

Anonim
09/01/13, 23.17 O

Gan,boleh usul ga?..bisa gak buat script model situs goal(dot)com. dimna dalam satu kotak terdapat beberapa judul posting saja?

Anonim
09/01/13, 23.19 O

bisa buat script/css model homepage goal(dt) com ga gan?? jadi dalm satu kotak terdiri dari banyak judul post saja gak ada deskripsinya

09/01/13, 23.34 O

mantaan Gan tutorialnya, memang ini cara yg saya cari2 selama ini, untuk menerapkan di template saya.
tapi yang jadi masalahnya, setelah saya mengikuti tutorial yang Agan sampaikan, semuanya gagal Gan.
jika Agan berkenan untuk membantu saya, silahkan Agan tinjau keadaan template saya. biar Agan bisa tau dimana letak kesalahan saya sehingga saya tdk bsa menerapkan tutorial agan di tmpat saya.
atas perhatian, dan bantuan Agan saya ucapkan banyak terimakasih Gan....!!!

Anonim
10/01/13, 01.30 O

gan ada yang aneh ma blog saya..ketika saya terapkan.masa ketika baca selngkapnya diklik ga ada artikel atau isi postingnya..jangankan seluruh body artikel judulnya pun gak nyangkut..cape..dee

10/01/13, 05.14 O

@Adam AiyasiSebenarnya mudah Sob. Secara prinsip tekniknya serupa dengan teknik yang digunakan dalam artikel ini. Hanya saja untuk model seperti yang Sobat maksud, deskripsi artikel tidak disertakan di dalamnya.

Jadi saya rasa tidak ada sulitnya untuk membuat desain seperti yang Sobat maksudkan.

10/01/13, 05.39 O

@wahyu diSobat, secara prinsip sebenarnya teknik ini diperuntukkan untuk template standar Blogger, namun dapat pula diterapkan pada kustom template jika dalam template tersebut menggunakan id='main'.

Akan tetapi bila Sobat belum dapat menerapkannya, maka silakan periksa dulu apakah dalam template terdapat bagian tersebut atau tidak.

10/01/13, 08.40 O

@Adam AiyasiSobat, sayangnya dalam profil Google Plus saya tidak mendapatkan informasi apapun tentang blog yang Sobat kelola, sehingga ahirnya saya tidak dapat melakukan pengecekan untuk mengetahui penyebabnya.

Namun demikian sebenarnya bila dalam penerapan tidak ada kekeliruan (dalam hal ini seluruh script telah dimasukkan dan tidak ada script lain yang terhapus), maka saya dapat memastikan bahwa hasil yang didapatkan adalah sesuai dengan yang semestinya. :)

10/01/13, 09.51 O

maaf mas saya masih bingung,maklum saya masih blum bnyak tau tentang HTML. gmana kalo saya minta tolong dg sampean supaya sampean kasih kode kode yg harus dirubah pada tempalte saya. atau saya kiirim file template saya ke email sampean?

10/01/13, 09.52 O

maaf kalo saya sudah banyak tanya, dan ngerepotin sampean Mas..!!

10/01/13, 10.45 O

Bang ga ngerti ni..
ada yang salah

11/01/13, 15.04 O

@wahyu diSobat, agar tidak bingung coba perhatikan langkah yang ketiga.

Kode yang dimaksud dalam langkah ketiga inilah yang dihapus dan kemudian diganti.

Jadi, untuk menghindari kekeliruan maka terapkan dulu pada blog uji coba dan kemudian bila telah berhasil maka terapkan pada blog yang Sobat kelola. :)

11/01/13, 15.08 O

@Fascal Nurramdhan AKalau begitu coba dipahami dulu langkah-demi langkah kemudian baru menerapkannya, Sob. :)

12/01/13, 17.25 O

maaf kalo saya bertanya sekali lgi.

didalam template itu kan ada beberapa kode (tidak cuma 1).

dari mulai kode ,yg pertama sampai yg terakhir sudah saya coba semua, tapi tetap nihil hasilnya.

siapa tau templatenya gak mendukung??
sudah saya coba juga pake template asli dan murni dari blogger tetap juga gak ada hasilnya.
dan juga sudah saya jajal dengan beberapa template hasil download dari beberapa teman2 blogger lainnya tetepa jg gak berhasil.

tolong dong kasih tau letak kesalahannya dimana?

16/01/13, 16.22 O

@wahyu diSobat, kalau begitu setelah brada dalam editor template, maka lakukan pencarian dengan cara menekan tombol F3 atau Ctrl + F dan kemudian gunakan b:includable id='main' var='top' sebagai kata kuncinya.

Dengan demikian maka saya dapat memastikan bahwa Sobat akan menemukan bagian yang dimaksud.

Anonim
20/01/13, 15.55 O

Blogku makin cantik aja berkat http://eltelu.blogspot.com/ ....makasih ya!

22/01/13, 09.52 O

@acep kamalSama-sama Sobat. Syukurlah bila demikian. :)

30/01/13, 21.34 O

kok gambar semua postingan jagi gambar L3? itu kenapa mas?

30/01/13, 21.37 O

kok gambar semua postingannya jadi L3? ada apa mas?

31/01/13, 05.30 O

@Raihan AlkhairHal itu disebabkan kaena tidak ditemukan adanya gambar di awal postingan.

Untuk mengatasinya, silakan Sobat edit template kemudian cari bagian berikut ini:

https://lh4.googleusercontent.com/-2GChmqVRnH8/UCeepvr6GXI/AAAAAAAAAdw/rX6lZ3MSEDo/s800/ELTELU.png

Dan selanjutnya ganti dengan kode URL di bawah ini.

https://lh4.googleusercontent.com/-eRDsEdCfSQw/UQmcgxiL9aI/AAAAAAAABHs/JaKhiAtPP04/s144/No%2520Image.jpg

Semoga dapat membantu. :)

09/02/13, 13.45 O

..
sob, kesimpulannya adalah saya mengalami kebingungan, hheeheh [pendatang baru] sob, mau nanya, kalo ane mau pakek template bawaan tapi mau ane buat kayak tampilan sejenis, okezone, goal, itu gmn ya cara'a? sebelumnya terimakasih telah menyempatkan untuk membaca komentar saya,

09/02/13, 14.17 O

@AYAHE MELA sob, bingung ni, alias pendatang baru, kalo ane mau buat blog ane jadi'a kyk tampilan okezone,goal, atau sejenisnya, gmn caranya ya?
ada cara praktisnya ga ya ?
terimaksih sebelumnya sudah menyempatkan untuk membaca pertanyaan ane,,

11/02/13, 07.45 O

@AHAUntuk keperluan tersebut, tentu saja ada banyak hal yang mesti dilakukan, Sob.

Termasuk diantaranya adalah dengan cara melakukan kustomisasi HTML, CSS, atau script lainnya yang terdapat dalam template, yang tentunya disesuaikan dengan desain yang diinginkan. :)

16/02/13, 00.07 O

gan q coba kok g berhasil y? mohon pencerahannya?

18/02/13, 07.37 O

@PRISKO SUSANTOSayang sekali saya tidak mendapati informasi apapun tentang blog yang Sobat kelola, dalam profil Google Plus, sehingga akhirnya saya tidak dapat melakukan pengecekan secara langsung untuk mengetahui penyebabnya.

Jadi, untuk sementara saya mohon maaf bila belum dapat memberikan solusi jawaban kepada Sobat.

02/03/13, 09.29 O

saya sudah berhasil menerapkan yang ini di blog saya!

http://psantrenonline.blogspot.com/

cuman yang headline saya masih gagal!
dan kelihatanya gk bakalan bisa, coz saya tidak menggunakan template standar blog!

Btw Terimakasih ya tutorialnya!
maju terus ElTelu

04/03/13, 13.36 O

@Denz AhmadTerimakasih balik Sobat.

Tutorial yang saya terbitkan dalam tiap artikel, memang mengacu pada penggunaan template standar Blogger. Sehingga apabila diterapkan pada custom template, maka hasilnya belum tentu sesuai dengan yang diharapkan. :)

08/03/13, 10.18 O

Salam kenal Master "Semar Bingung" saya "Zen Ms" setelah jelajah ketemu blog ini, saya tertarik artikel membuat tab menu navigasi di navbar. sudah berhasil tapi ndak bisa nambah sub menunya.
Gimana ya, cara nambah kode html untuk sub menunya?
Trims dari blogger pemula "Blog Buru Isaku Niki"

13/03/13, 01.00 O

@Ahlul HisabSobat, karena kebetulan pertanyaan tersebut sama dengan pertanyaan yang Sobat ajukan dalam artikel tanya jawab, maka silakan klik di sini guna membuka artikel tanya jawab, karena dalam artikel tersebut telah saya berikan uraian lengkap terkait dengan pertanyaan Sobat. :)

19/06/13, 15.26 O

kang punya ku 2 kolom,kalo mau jd 1 kolom gmn y?cb cek blog ku..

20/06/13, 16.21 O

@KudhenKalau tidak salah (sebab itu bukan template buatan saya), sepertinya dapat dilakukan dengan cara mengubah ukuran untuk bagian yang saya tandai dengan huruf tebal pada CSS berikut ini, Sob.

#kotak-posting{margin:10px 0 10px 10px}.breadcrumbs,#blog-pager{margin-right:10px}.post{margin:0 10px 10px 0 !important;float:left !important;width:292px;height:145px;overflow:hidden;display:inline}

Selanjutnya agar menjadi satu kolom, maka ukuran untuk bagian yang saya tandai dengan cetakan huruf tebal di atas dapat diganti dengan ukuran lain misalnya adalah width:610px;height:120px;.

Semoga dapat membantu. :)

06/07/13, 12.39 O

kog ada image L3 nya??

07/07/13, 00.48 O

@md nandaUntuk mengganti gambar yang Sobat maksud, silakan edit template dan kemudian cari bagian berikut ini:

https://lh4.googleusercontent.com/-2GChmqVRnH8/UCeepvr6GXI/AAAAAAAAAdw/rX6lZ3MSEDo/s800/ELTELU.png

Selanjutnya ganti dengan URL gambar di bawah ini atau dapat pula Sobat ganti dengan URL gambar yang Sobat kehendaki.

https://lh4.googleusercontent.com/-eRDsEdCfSQw/UQmcgxiL9aI/AAAAAAAABHs/JaKhiAtPP04/s144/No%2520Image.jpg

Semoga dapat membantu. :)

09/08/13, 16.51 O

@AYAHE MELA

untuk kode rss di atas ditambahkan di mana ya pak?
thanks

10/08/13, 00.58 O

@Budi SantosoApabila yang Sobat maksud adalah kode RSS untuk tombol yang terletak di bawah menu 'Pasang Iklan' blog ini, maka kode RSS-nya saya letakkan pada sebuah kolom tersendiri dalam area header.

Jadi apabila Sobat lakukan 'Inspect Element' terhadap laman blog ini, maka Sobat akan mendapati bahwa pada bagian header terdapat 4 (empat) buah kolom yang masing-masing dipakai untuk menempatkan judul blog, widget penelusuran, Google Translate, dan beberapa tombol sosial media beserta tombol RSS di bagian paling kanan.

Sehingga dengan demikian dapat diartikan pula bahwa dalam area header terdapat 4 (empat) buah section yang salah satunya digunakan untuk menambahkan kode RSS dengan cara penambahan widget dalam bentuk 'HTML/JavaScript'

Akan tetapi jika kode RSS yang Sobat maksud bukan merupakan kode untuk tombol RSS yang terdapat di bawah menu 'Pasang Iklan', maka ada baiknya bila Sobat perjelas terlebih dulu pertanyaan tersebut sehingga saya dapat lebih mudah dalam memahami dan kemudian menguraikan jawabannya.


Sekian dan semoga dapat membantu.

@AYAHE MELA

Terima kasih sob, sangat membantu.
Oh ya, satu lagi untuk kode ini :
#main.main.section{
margin: 0px;
}
#sidebar-right-1.sidebar.section {
margin: 0px;
}

.footer-inner {
padding: 5px;
}

ditambahkan dimana ya ?
Terima kasih sob.

11/08/13, 02.22 O

@Peluang Bisnis Online TerbaruKarena kode tersebut tidak ada kaitannya sama sekali dengan artikel di atas, maka tidak pelu ditambahkan di bagian manapun. Hal ini disebabkan karena kode tersebut merupakan uraian jawaban atas sebuah kasus yang terjadi pada blog yang berbeda sesuai dengan pertanyaan yang diajukan sebelumnya.

Jadi agar pertanyaan tidak keluar dari topik maka ada baiknya bila Sobat perhatikan terlebih dulu uraian pada artikel di atas maupun uraian yang terdapat pada setiap komentar secara runtut.

Semoga dapat dipahami.

25/08/13, 20.02 O

bgaimana cara agar di bagian home penu dengan bidang gan

kog punya saya cuma tiga

http://carilbaru.blogspot.com

28/08/13, 21.36 O

@md nandaSepertinya setelan pos dan komentar yang Sobat tampilkan di laman utama (beranda) memang hanya untuk 3 (tiga) buah postingan saja. Sehingga untuk mengatasi hal tersebut silakan lakukan pratinjau pada setelan pos dan komentar blog yang Sobat kelola kemudian ubah sesuaikan jumlah postingan yang ingin ditampilkan di laman beranda.

Semoga dapat membantu.

Anonim
29/08/13, 15.52 O

Ya Allah terimakasih banyak gan. Anda telah membantu permasalahan saya. sukses selalu buat agan

30/08/13, 18.34 O

gan kog kmentar pada blog saya tidak bisa di lihat

hnya bertuliskan 3 komentar

mhon pencerahannya

02/09/13, 08.56 O

@Sts SantusoSama-sama dan saya sampaikan terimakasih pula untuk Sobat yang telah berkenan mengeposkan komentar dalam artikel ini. :)

02/09/13, 10.24 O

@md nandaWahhh, kalau itu saya kurang paham Sob. Sebab teknik di atas apabila diterapkan tidak akan berpengaruh sama sekali terhadap komentar yang terdapat dalam setiap artikel.

Bisa jadi hal tersebut disebabkan karena adanya rangkaian script atau kode yang terhapus sehingga komentar yang terdapat dalam artikel tidak dapat ditampilkan.

05/09/13, 11.41 O

html komentar apa gan??

07/09/13, 01.07 O

@md nanda<b:if cond='data:blog.pageType == "static_page"'>
<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 == "item"'>
<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>

04/05/14, 19.59 O

Terima kasih gan

emang ini yang aku cari

kebetulan ketemu disini
ijin pasang, tentunya dengan sentuhan modifikasi :)

terima kasih gan

06/05/14, 01.18 O

@riefand riefund Sama-sama Sob. Semoga saja Sobat tidak mengalami kesulitan dalam mengimplementasikannya. :)

06/05/14, 12.20 O

@AYAHE MELA

yaps, sudah sukses saya terapkan

terima kasih mas :D

sekarang class pembungkus posting pada beranda dan halaman statis sudah memiliki class sendiri sendiri..

btw untuk class dihalaman statis apa bisa dihilangkan mas, class date-outer, dan date-post itu ?

06/05/14, 21.03 O

@riefand riefund Terkait dengan pertanyaan tersebut, tidak ada salahnya bila Sobat lakukan uji coba. Namun demikian sangat saya sarankan pula apabila Sobat melakukan uji coba, maka lakukan percobaan tersebut pada blog uji coba pula.

17/03/16, 14.41 O

makasih gan tutorialnya, blog ane sukses ngeditnya

18/03/16, 10.18 O

@renni yp Sama-sama dan kembali kasih atas komentarnya di artikel ini Sob.

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog