Tampilkan postingan dengan label kolom widget. Tampilkan semua postingan

Membuat Kolom Widget Recent Post adalah artikel lanjutan dari memasang recent post di Blogger yang sudah tidak berfungsi lagi. Jadi, kita akan membuat kolom widget recent post sendiri dan tentunya menggunakan kode script dan memasang di didalam template blog kita. Kolom widget recent post ini merupakan buatan mas Kolis karena saya sendiri sampai saat ini belum bisa membuat kode recent post yang bisa tampil diseluruh bagian blog dan tidak melulu tampil di sidebar. Sampai saat ini saya mencoba membuat sendiri, bagaimana recent post bisa tampil didalam artikel blog!

Membuat Kolom Widget Recent Post

Untuk membuat kolom widget recent post agar ada dibagian sidebar, silahkan anda ikuti langkah-langkah berikut ini
  1. Silahkan masuk dulu ke akun Blogger anda
  2. Masuk ke Template >> Edit HTML >> centang Expand Widget Templates >> tekan tombol Ctrl+F di keyboard
  3. Cari kode ]]></b:skin>
    Dan tambahkan kode berikut diatas kode ]]></b:skin>
    #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
    #terbaru{margin:0px}
    .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
    .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
    .mas-elemen h6,.mas-elemen h5 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
    .mas-elemen:hover{background-color:#c3c3c3}
    .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
    #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
    #mas-navigasifeed:hover{background-color:#c3c3c3}
    #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
    #mas-navigasifeed span{padding:5px 10px}
    #mas-navigasifeed .next{float:right}
    #mas-navigasifeed .previous{float:left}
    #mas-navigasifeed .home{text-align:center}
    #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
  4. Selanjutnya cari kode </head> dan letakkan kode berikut tepat diatas </head>
    <script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://panduantemplateblog.blogspot.com/";
    var charac = 100;
    var urlprevious, urlnext;

    function maskolisfeed(johny,banget){
    var showfeed = johny.split("<");
    for(var i=0;i<showfeed.length;i++){
    if(showfeed[i].indexOf(">")!=-1){
    showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
    }
    }
    showfeed = showfeed.join("");
    showfeed = showfeed.substring(0,banget-1);
    return showfeed;
    }
    function showterbaru(json) {
    var entry, posttitle, posturl, postimg, postcontent;
    var showblogfeed = "";
    urlprevious = "";
    urlnext = "";
    for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
    urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
    urlnext = json.feed.link[k].href;
    }
    }
    for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }
    if ("content" in entry) {
    postcontent = entry.content.$t;
    } else if ("summary" in entry) {
    postcontent = entry.summary.$t;
    } else {
    postcontent = "";
    }
    if ("media$thumbnail" in entry) {
    postimg = entry.media$thumbnail.url;
    } else {
    postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8OiJpJTxK_GDoD-qz3PwlwgKZlqMmHdvBC34CzlPWWJ7fSjUb4EhxmCM0CInkfOwVP4_qEY0BJ45ObOjktg5EUtfvXErTXapwWG5n3qvjKe-5kWfJCK_mK2VGZavDZzLwJ7Qvsyb67U8/s1600/no+image.jpg";
    }
    showblogfeed += "<div class='mas-elemen'>";
    showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h5><a href='" + posturl + "'>" + posttitle + "</a></h5>";
    showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "</p>";
    showblogfeed += "</div>";
    }
    document.getElementById("terbaru").innerHTML = showblogfeed;
    showblogfeed = "";
    if(urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
    } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
    }
    if(urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
    } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
    }
    showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
    document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
    }

    function navigasifeed(url){
    var p, parameter;
    if(url==-1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
    } else if (url==1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
    } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
    }
    parameter += "&callback=showterbaru";
    incluirscript(parameter);
    }
    function incluirscript(parameter) {
    if(startfeed==1) {removerscript();}
    document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
    document.getElementById("mas-navigasifeed").innerHTML = "";
    var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
    var terbaru = document.createElement('script');
    terbaru.setAttribute('type', 'text/javascript');
    terbaru.setAttribute('src', archievefeed);
    terbaru.setAttribute('id', 'MASLABEL');
    document.getElementsByTagName('head')[0].appendChild(terbaru);
    startfeed = 1;
    }
    function removerscript() {
    var elemen = document.getElementById("MASLABEL");
    var parent = elemen.parentNode;
    parent.removeChild(elemen);
    }
    onload=function() { navigasifeed(0); }
    //]]>
    </script>
  5. Silahkan simpan Template blog anda terlebih dahulu
  6. Sekarang tutup menu Template dan buka menu Tata Letak
  7. Setelah berada di menu Tata Letak, silahkan anda klik Tambahkan Gadget yang ada dibagian sidebar kanan blog seperti yang terlihat pada gambar berikut ini

    Membuat Kolom Widget Recent Post
  8. Selanjutnya scroll/gulir kebawah dan cari widget HTML/Javascript dan salin kode berikut kedalam kolom HTML/Javascript
    <div id="terbaru"></div>
    <div id="mas-navigasifeed"></div>
  9. Simpan widget anda dan lihat hasilnya di homepage blog anda
Keterangan :
var numfeed = 5; adalah jumlah artikel yang tampil
var urlblog = "http://panduantemplateblog.blogspot.com/"; silahkan ganti url ini dengan url blog anda, JANGAN SAMPAI LUPA!
var charac = 100; adalah jumlah ringkasan dari setiap artikel yang tampil

Okey, itulah cara membuat kolom widget recent post yang bisa anda pasang didalam blog anda dan anda tidak perlu kwatir untuk loading blog setelah terpasang script ini, karena tidak akan mempengaruhi loading blog anda. Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini Membuat Kolom Widget Recent Post
Description: Membuat Kolom Widget Recent Post
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Membuat Kolom Widget Recent Post
Cara Memasang Kolom Widget Recent Post ini adalah cara sederhana yang sangat mudah dilakukan karena kita hanya akan menggunakan kolom widget Recent Post yang telah disediakan oleh Blogspot yang ada didalam meny Tata Letak. Untuk memasang kolom widget recent post ini, anda cukup mengikuti panduan yang telah saya buat khusus untuk anda semua. Dan sebelum melanjutkan pembahasan ini, saya jelaskan sedikit mengenai apa itu recent post. Recent post merupakan daftar artikel terbaru yang dibuat dengan kode tertentu agar menyesuaikan dengan tampilan atau isi yang ada didalam blog itu sendiri. Untuk memasang kolom widget recent post ini kita bisa menggunakan widget yang telah disediakan oleh Blogspot atau membuatnya sendiri.

Dan pada artikel ini, kita mencoba untuk memasang kolom widget recent post yang ada didalam menu Tata Letak Blogger. Yuk apakah berhasil...
  1. Silahkan masuk dulu ke akun Blogger anda
  2. Pilih menu Tata Letak (no.1)

    Cara Memasang Kolom Widget Recent Post

    Di dalam menu Tata Letak ini, anda akan melihat tampilan menu kotak-kotak (kolom) yang merupakan gambaran skema dari blog anda dan untuk memasang kolom widget recent post, anda cukup mengklik tulisan Tambahkan Gadget (no.2) yang biasanya ada disebelah kanan pada menu Tata Letak
  3. Setelah mengklik Tambahkan Gadget, maka akan muncul halaman pop up (melayang) dari beberapa widget yang bisa anda temukan seperti tampilan berikut ini (no.3)

    Cara Memasang Kolom Widget Recent Post
  4. Silahkan ada scroll/gulir kebawah, maka anda akan menemukan widget yang bernama Recent post (no.4) seperti gambar berikut ini.

    Cara Memasang Kolom Widget Recent Post

    Namun perlu anda ingat, jika Recent post tidak ada maka kemungkinan besar widget ini telah dihapus
  5. Silahkan anda klik dibagian Recent post atau tanda + yang ada disamping kanan
  6. Lho? Kenapa tampilannya seperti ini? (no.5)

    Cara Memasang Kolom Widget Recent Post

    Jika anda mengalami hal seperti itu, maka itu menandakan kalau kolom widget recent post yang disediakan oleh Blogger sudah tidak bekerja lagi
  7. Karena widget recent postnya tidak ada, silahkan anda klik Batal
Yang menjadi pertanyaannya, kenapa kolom untuk recent post di blogspot tidak bisa? Ada 2 kemungkinan; Kemungkinan pertama dikarenakan developer yang membuat recent post sudah tidak menyediakan lagi dan kemungkinan kedua, kode dari recent post mengandung bug sehingga Google membloknya.

Karena kolom widget recent post di Blogger sudah tidak bekerja lagi, maka anda harus membuatnya sendiri seperti yang telah saya jelaskan di Membuat Kolom Widget Recent Post

Okey, demikian cara memasang kolom widget recent post di blog tapi sudah tidak berfungsi lagi. Untuk selanjutnya, mari kita diskusikan mengenai permasalahan ini, kenapa recent post tidak muncul? dengan meninggalkan komentar untuk artikel ini Cara Memasang Kolom Widget Recent Post
Description: Cara Memasang Kolom Widget Recent Post
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Memasang Kolom Widget Recent Post
Benarkah Kolom Widget Memperberat Loading Blog? Mungkin itu adalah pertanyaan yang sering timbul jika kita ingin memasang beberapa kolom widget di blog, baik itu diatas, disamping atau dibawah. Dalam menambahkan beberapa isi kolom widget tertentu didalam blogspot, secara langsung saya hampir tidak pernah menggunakan isi kolom yang telah disediakan oleh Blogspot karena selain tampilannya yang monoton juga mempengaruhi tampilan blog dan juga yang saya ketahui isi kolom widget yang telah disediakan oleh Blogspot, beberapa sebagian, merupakan buatan dari para Developers (pengembang) yang nota bene akan terpasang script tertentu kedalam isi kolom widget tersebut. Sehingga jika kita memasang beberapa isi kolom widget yang ada di Blogspot hal inilah yang akan mempengaruhi tampilan blog, salah satunya kecepata loading blog akan berkurang. Itulah kenapa, banyak para master blogger yang menyarankan untuk tidak memasang terlalu banyak isi kolom widget bawaan Blogspot. Bukan karena isi widget kolom itu tidak sesuai dengan topik yang kita berikan untuk blog kita tapi karena isi kolom widget tersebut bukan dari Google ataupun Blogspot (Blogger).

Jika kita memasang isi kolom widget ke dalam blog kita maka secara tidak langsung saat proses loading berjalan maka mesin space hosting yang ada di Google ataupun Blogspot akan langsung terhubung dengan space host yang digunakan oleh para Developers dalam menyimpan script-script yang mereka gunakan didalam isi kolom widget blogspot. Coba anda perhatikan dibagian pojok kiri bawah saat proses loading blog, web site, atau situs-situs lainnya. Dibagian tersebut akan menampilkan beberapa link yang tidak semuanya link merupakan link internal yang di load tapi ekternal link juga, dan dari sinilah secara tidak langsung ada link-link ekternal yang terpasang didalam blog kita! Seperti yang terlihat pada contoh tampilan gambar berikut

Kolom Widget Memperberat Loading Blog

Semakin banyak anda memasang kolom widget, apalagi itu adalah widget-widget yang bukan merupakan buatan Google atau Blogspot maka semakin lama proses loading blog anda. Lalu bagaiaman cara mengetahui kolom widget buatan Google sendiri dan yang bukan? Gampang saja, coba perhatikan perbedaan 2 gambar widget yang ada di Blogspot berikut ini

Kolom Widget Memperberat Loading Blog

Dari gambar diatas, anda tentu sudah bisa membedakan mana kolom widget yang disediakan oleh Google atau Blogger dan mana yang bukan

Jadi, benarkah kolom widget memperberat loading blog? Salah satu faktor yang saya akui, iya! Karena selain kolom widget, masih ada beberapa faktor yang juga memperberat loading blog, diantaranya banyaknya kode CCS yang digunakan, JavaScript, dan Html-Html yang masih ada kaitannya dengan pemasangan kolom widget. Untuk lebih jelasnya silahkan buka artikel Pengaruh Html, CSS, dan JavaScript Terhadap SEO Blog.
Jika loading blog kita berat dan mempengaruhi kecepatan loading maka pada tahapan selanjutnya akan mempengaruhi kualitas SEO yang ada didalam blog kita, dan hasilnya akhirnya bisa anda rasakan sendiri :)

Okey, itulah sedikit gambaran mengenai kolom widget yang memperberat loading blog. Sebenarnya kalau dibahas lebih dalam lagi, kita akan sampai pada pembahasan mengenai SEO dan pembahasan diatas mungkin bisa anda pelajari lebih lanjut lagi. Jika ada pertanyaan mengenai kolom widget memperberat loading blog ini, mari kita diskusikan bersama dengan meningalkan komentar untuk artikel ini, Benarkah Kolom Widget Memperberat Loading Blog?
Description: Benarkah Kolom Widget Memperberat Loading Blog?
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Benarkah Kolom Widget Memperberat Loading Blog?
Menjadikan Homapage Dua Kolom Posting Blogspot sebenarnya anda tidak perlu repot-repot harus menambahkan atau mengedit kode template blog anda karena dengan menggunakan mesin pencari dengan kata kunci template dua kolom posting maka anda akan menemukan beberapa blog yang menyediakan template dengan homepage dua kolom posting. Jika anda tetap kesulitan menjadikan homepage dua kolom posting, untuk panduannya silahkan buka di cara membuat dua kolom posting homepage blogspot. Di artikel tersebut telah saya jelaskan secara detail dan jelas.

Seperti halnya blog ini yang memiliki tiga kolom posting di homepage, awalnya memang saya ingin meniru sebuah tampilan website yang memiliki lima kolom posting homepage dan tanpa sidebar namun setelah salah satu artikel dibuka maka sidebar pun tampil tapi karena beberapa alasan maka saya urungkan niat meniru tersebut karena takut melanggar hak cipta dari sang pemilik website itu sehingga saya biarkan sidebar tetap ada di homepage atau sesuai dengan template aslinya dan hanya beberapa poin yang masih meniru website tersebut


Selain itu, dengan memilih tampilan template seperti yang saya gunakan di blog ini, memang ada keuntungan tersendiri untuk perkembangan blog ini. Seperti yang telah saya rasakan saat ini yaitu mendapatkan PR 1 dalam waktu singkat. Kok bisa? Maaf kalau ini tetap menjadi rahasia saya :)

Jadi, menjadikan homepage dua kolom posting atau lebih menjadikan halaman depan blog tampil minimalis sehingga para pengunjung blog tidak terlalu capek untuk melakukan scrolling ke bawah. Dan itulah mengapa semua template toko online menggunakan 4 - 5 kolom di halama depannya karena mereka memiliki tujuan terhadap tampilan tersebut yaitu meningkatkan penjualan!

Terakhir, semua pilihan ada ditangan anda untuk memilih menggunakan template atau mengedit dan menjadikannya dua kolom atau lebih. Terimakasih telah membaca artikel wacana ini, Menjadikan Homapage Dua Kolom Posting Blogspot
Description: Menjadikan Homapage Dua Kolom Posting Blogspot
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Menjadikan Homapage Dua Kolom Posting Blogspot
Cara Membuat Dua Kolom Posting Homepage Blogspot ini merupakan artikel request dari mas Ibnu Syamsun dalam komentarnya disini oke mbak ane sukses menerapkan di blog ane makasih tutorialnya sangat jelas. request "membuat posting 2 kolom di hompage dong" :) Untuk membuat dua kolom posting homepage blogspot ini sebenarnya sudah ada di mesin pencari Google namun sedikit ada tambahan yang perlu saya benahi dari beberapa artikel tentang cara membuat dua kolom posting homepage blogspot agar lebih baik lagi. Berikut gambar dari hasil cara membuat dua kolom posting homepage blogspot yang telah saya buat di blog saya sendiri

Cara Membuat Dua Kolom Posting Homepage Blogspot

Berikut Cara Membuat Dua Kolom Posting Homepage Blogspot
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari Kode ]]></b:skin>
  4. Letakkan kode berikut dibawah kode ]]></b:skin>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style>
    .post {width:250px;height:400px;margin:0 20px 5px 0;overflow:hidden;float:left;}
    </style>
    </b:if>


    Tambahan 1 :
    • Jika anda ingin menambahkan background cukup memasang kodenya saja seperti berikut ini
      .post {background:#00000;width:250px;height:400px;margin:0 20px 5px 0;overflow:hidden;float:left;}
    • Atur lebar dan tinggi postingan
      width:250px;height:400px;
    • Atur jarak antar postingan
      margin:0 20px 5px 0;

    Tambahan 2 :
    Jika di blog anda terdapat Readmore, atur juga jumlah kata, lebar dan tinggi gambar yang terdapat didalam kode Readmore tersebut
    Contoh:
    <script type='text/javascript'>
    var thumbnail_mode = "float" ;
    summary_noimg = 250; ← perkecil angka ini
    summary_img = 250; ← perkecil angka ini
    img_thumb_height = 200; ← perkecil angka ini
    img_thumb_width = 200; ← perkecil angka ini
    </script>
    <script type='text/javascript'>
    .............
    </script>
  5. Selanjutnya cari kode .post {
    Pasang auto diantara kode jarak dalam .post {
    Sebelum
    .post {margin:0.5em 0 1.5em;}
    Sesudah
    .post {margin:0.5em auto 0 1.5em;}

    Penambahan auto ini sebenarnya hanya tambahan saja agar jarak antar artikel sesuai. Bisa anda tambahkan, bisa juga tidak, namun untuk mengetahuinya apakah perlu menambahkan auto, silahkan preview blog terlebih dahulu dan bandingankan hasilnya antara ada dan tidak adanya auto
  6. Setelah selesai. Preview blog anda terlebih dahulu dan lihat hasilnya. Jika hasilnya seperti gambar berikut ini, dimana link Posting Lama terlihat seperti gambar berikut ini

    Cara Membuat Dua Kolom Posting Homepage Blogspot

    Pada gambar diatas, link Posting Lama atau sejenisnya berada sejajar dengan artikel blog dan untuk mengembalikan ke posisi sebenarnya yaitu berada di bawah kanan, silahkan cari kode <b:include name='nextprev'/> dan tambahkan kode <div style='clear: both;'/> tepat diatas <b:include name='nextprev'/>
    Hasilnya:
    <div style='clear: both;'/>
    <b:include name='nextprev'/>
  7. Preview lagi blog anda
  8. Selamat! Halaman depan atau homepage blog anda sudah berubah menjadi dua kolom posting
Jika ada pertanyaan tentang cara membuat dua kolom posting homepage blogspot ini, mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Cara Membuat Dua Kolom Posting Homepage Blogspot
Description: Cara Membuat Dua Kolom Posting Homepage Blogspot
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Dua Kolom Posting Homepage Blogspot
Cara Membuat Satu Kolom Widget Diatas Footer adalah juga sama seperti membuat satu kolom dibawah header atau diatas header dan tentunya lebih mudah dalam membuatnya. Kenapa saya mengatakan sama dalam membuat satu kolom widget diatas footer dengan diatas header? karena sama-sama dalam satu template dengan lebar template yang sama :) dan yang membedakan hanya pada tata letak saja. Silahkan anda bandingkan tata letak pada artikel yang telah saya jelaskan sebelumnya (hasil membuat satu kolom) dengan hasil setelah anda menerapkan artikel ini, cara membuat satu kolom diatas footer

Cara Membuat Satu Kolom Widget Diatas Footer

Berikut Cara Membuat Satu Kolom Widget Diatas Footer
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode ]]></b:skin>
  4. Salin kode berikut tepat diatas kode ]]></b:skin>
  5. #oneupperfooter{margin:10px 0;padding:2px;width:100%;}
  6. Cari kode berikut ini <div id='footer'>
  7. Letakkan kode berikut ini tepat dibawah <div id='footer'>
    <b:section class='footer' id='oneupperfooter' preferred='yes'/>
    Sehingga hasilnya seperti berikut ini
    <div id='footer'>
    <b:section class='footer' id='oneupperfooter' preferred='yes'/>
  8. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasil di menu Tata Letak
Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Okey, semoga artikel cara membuat satu kolom widget diatas footer ini memberikan manfaat dan mudah dibuat untuk dipasang diblog anda. Terimakasih, silahkan tinggalkan komentar anda jika ada permasalahan dalam membuat satu kolom widget diatas footer
Description: Cara Membuat Satu Kolom Widget Diatas Footer
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Satu Kolom Widget Diatas Footer
Cara Membuat Dua Kolom Widget Dibawah Postingan adalah cara yang sama ketika membuat dua kolom dibawah header atau kolom-kolom widget yang lainnya hanya perbedaann kode, perbedaan tata letak dan perbedaan cara saja. Seperti halnya fungsi dan manfaat saat membuat satu kolom widget dibawah postingan, manfaat dua kolom widget ini juga lebih maksimal karena ada link artikel yang sejajar antara kolom yang satu dengan yang lainnya (kolom kanan kiri) seperti yang terlihat pada blog saya ini, sayang kolom yng sebelah kanan masih kosong :)

Cara membuat dua kolom widget dibawah postingan ini sebenarnya ada dua cara yang bisa dilakukan yaitu kita bisa benar-benar membuat dua kolom dibawah postingan dan hasilnya bisa terlihat di menu Tata Letak, sedanghkan yang satunya lagi, kita membuat dua kolom dibawah postingan tapi hasilnya tidak terlihat di menu Tata Letak seperti yang saya gunakan pada template blog ini (nanti akan saya share juga..)

Cara Membuat Dua Kolom Widget Dibawah Postingan

Berikut Cara Membuat Dua Kolom Widget Dibawah Postingan
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode berikut ini
    #main-wrapper {float:left;margin-right:10px;overflow:hidden;width:507px;word-wrap:break-word;}
  4. Letakkan kode berikut tepat dibawah kode no.3
    #twounderposting {width:100%;float:center;margin:10px 0;padding:0px;}
    #twounderpostingleft{width: 45%;float: left;}
    #twounderpostingright{width: 45%;float: right;}

    • Atau jika anda tidak menemukan kode #main-wrapper karena perbedaan kode pada template, cari saja kode ]]></b:skin>
    • letakkan kode berikut tepat diatas kode ]]></b:skin>
      #twounderposting {width:100%;float:center;margin:10px 0;padding:0px;}
      #twounderpostingleft{width: 45%;float: left;}
      #twounderpostingright{width: 45%;float: right;}
  5. Cari kode berikut ini
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </div>
  6. Letakkan kode berikut sebelum kode penutup pada no.5
    <div id='twounderposting'>
    <div id='twounderpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
    <b:section class='main' id='twounderpostingleft' preferred='yes' style='float:center;'/>
    </div>
    <div id='twounderpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
    <b:section class='main' id='twounderpostingright' preferred='yes' style='float:right;'/>
    </div>
    </div>

    Sehingga hasilnya akan terlihat seperti berikut ini
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section
    >
    <div id='twounderposting'>
    <div id='twounderpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
    <b:section class='main' id='twounderpostingleft' preferred='yes' style='float:center;'/>
    </div>
    <div id='twounderpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
    <b:section class='main' id='twounderpostingright' preferred='yes' style='float:right;'/>
    </div>
    </div>

    </div>
  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak
Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda
Sekian, jika ada permasalahan dalam membuat dua kolom widget dibawah postingan, silahkan tinggalkan komentar anda untuk artikel ini, Cara Membuat Dua Kolom Widget Dibawah Postingan
Description: Cara Membuat Dua Kolom Widget Dibawah Postingan
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Dua Kolom Widget Dibawah Postingan
Cara Membuat Satu Kolom Widget Dibawah Postingan sama halnya dengan membuat satu kolom diatas postingan, hanya beda tempat saja dan tentunya beda penempatan kode html. Membuat satu kolom widget dibawah postingan menurut saya lebih banyak keuntungannya jika meletakkannya tepat berada dibawah artike terkait artikel blog karena pada satu kolom tambahan tersebut bisa terpasang iklan (mis; AdSense) yang bisa 'menjebak' pengunjung blog untuk melakukan klik terhadap link iklan yang dikira link artikel blog, tentunya dengan sedikit trik agar mereka bisa mengklik secara valid! Membuat satu kolom widget dibawah postingan bisa anda buat dengan mengikuti beberapa cara sederhana berikut ini

Cara Membuat Satu Kolom Widget Dibawah Postingan

Berikut Cara Membuat Satu Kolom Widget Dibawah Postingan
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode berikut ini
    #main-wrapper {float:left;margin-right:10px;overflow:hidden;width:507px;word-wrap:break-word;}
  4. Letakkan kode berikut tepat dibawah kode no.3
    #oneunderposting {background:#ffffff;width:100%;margin:0 0 0.5em;padding:0.5em;}
    Atau jika anda tidak menemukan kode #main-wrapper karena perbedaan kode pada template, cari saja kode ]]></b:skin> dan letakkan kode #oneunderposting {background:#ffffff;width:100%;margin:0 0 0.5em;padding:0.5em;} tepat berada diatas kode ]]></b:skin>

  5. Selanjutnya cari kode berikut ini
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </div>

  6. Letakkan kode berikut sebelum kode penutup pada no.5
    <b:section class='main' id='oneunderposting' showaddelement='yes'/>
    Sehingga hasilnya akan terlihat seperti berikut ini
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    <b:section class='main' id='oneunderposting' showaddelement='yes'/>
    </div>

  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

  8. Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda
Sekian, jika ada permasalahan dalam membuat satu kolom widget dibawah postingan, silahkan tinggalkan komentar anda untuk artikel ini, Cara Membuat Satu Kolom Widget Dibawah Postingan
Description: Cara Membuat Satu Kolom Widget Dibawah Postingan
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Satu Kolom Widget Dibawah Postingan
Cara Membuat Dua Kolom Widget Diatas Postingan merupakan kelanjutan dari artikel sebelumnya yaitu cara membuat satu kolom widget diatas postingan yang hanya membaginya menjadi dua kolom widget seperti yang dijelaskan pada artikel ini, cara membuat dua kolom widget diatas postingan

Cara Membuat Dua Kolom Widget Diatas Postingan

Berikut Cara Membuat Dua Kolom Widget Diatas Postingan
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode ]]></b:skin>
  4. Letakkan kode berikut diatas kode ]]></b:skin>
    #twoupperposting{margin:10px 0;padding:0px;width:100%;}
    #twoupperpostingleft{width: 45%;float: left;}
    #twoupperpostingright{width: 45%;float: right;}
  5. Cari kode <div id='main-wrapper'>
  6. Letakkan kode berikut ini tepat dibawah kode <div id='main-wrapper'>
    <div id='twoupperposting'>
    <div id='twoupperpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
    <b:section class='main' id='twoupperpostingleft' preferred='yes' style='float:center;'/>
    </div>
    <div id='twoupperpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
    <b:section class='main' id='twoupperpostingright' preferred='yes' style='float:right;'/>
    </div>
    </div>


    Sehingga hasilnya seperti ini

    <div id='main-wrapper'>
    <div id='twoupperposting'>
    <div id='twoupperpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
    <b:section class='main' id='twoupperpostingleft' preferred='yes' style='float:center;'/>
    </div>
    <div id='twoupperpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
    <b:section class='main' id='twoupperpostingright' preferred='yes' style='float:right;'/>
    </div>
    </div>

    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    <b:section class='main' id='mainbottom' showaddelement='yes'/>
    </div>
  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak
Penting: Kode diatas bekerja di template blog saya dan setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Alangkah senangnya saya jika anda berkenan untuk meninggalkan komentar anda dalam artikel cara membuat satu kolom widget diatas postingan ini karena saya akan menjadi Follower blog anda. Terimakasih telah membaca artikel ini, Cara Membuat Dua Kolom Widget Diatas Postingan
Description: Cara Membuat Dua Kolom Widget Diatas Postingan
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Dua Kolom Widget Diatas Postingan
Cara Membuat Satu Kolom Widget Diatas Postingan adalah kita akan menambahkan beberapa kolom yang lebarnya sejajar dengan kolom postingan atau artikel blog. Kita tidak hanya bisa membuat satu kolom widget diatas postingan saja tapi selama lebar postingan blog anda mencukupi untuk dipasang kolom, maka anda bisa membuatnya lebih dari satu kolom widget. Dua kolom widget, tiga kolom widget bahkan penempatannya tidak hanya bisa dipasang diatas postingan saja, dibawah area tersebut juga bisa ditambahkan beberapa kolom. Dan pada artikel ini, kita akan membahas cara membuat satu kolom widget diatas postingan

Cara Membuat Satu Kolom Widget Diatas Postingan

Berikut Cara Membuat Satu Kolom Widget Diatas Postingan
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode ]]></b:skin>
  4. Letakkan kode berikut diatas kode ]]></b:skin>
    .upperposting{width: 100%;padding:10px 0px 10px 10px;background:#fff;margin:0px 0px 10px 0px;text-align:left;}
    .upperposting .widget{}
  5. Cari kode <div id='main-wrapper'>
  6. Letakkan kode berikut ini tepat dibawah kode <div id='main-wrapper'>
    <b:section class='upperposting' id='upperposting' preferred='yes'/>
  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak
Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Selanjutnya jika ada permasalahan dalam mengikuti panduan ini, silahkan tinggalkan komentar untuk artikel ini, Cara Membuat Satu Kolom Widget Diatas Postingan
Description: Cara Membuat Satu Kolom Widget Diatas Postingan
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Satu Kolom Widget Diatas Postingan
Cara Membuat Tiga Kolom Widget Dibawah Header ini sudah tidak ada uraian khusus lagi, cara membuatnya juga sama dengan membuat dua kolom widget dan kita langsung saja pada penerapan dari artikel ini, yaitu cara membuat tiga kolom widget dibawah header

Cara Membuat Tiga Kolom Widget Dibawah Header

Berikut Cara Membuat Dua Kolom Widget Dibawah Header
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode ]]></b:skin>
  4. Letakkan kode berikut diatas kode ]]></b:skin>
    #triunderheader {clear:both;} .triwidget {}
  5. Cari kode <div id='main-wrapper'>
  6. Letakkan kode berikut ini tepat diatas kode <div id='main-wrapper'>
    <div id='triunderheader'>
    <div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='header' id='kolom1' preferred='yes' style='float:left;'/>
    </div>
    <div id='kolom2' style='width: 35%; float: center; margin:0; text-align: left;'>
    <b:section class='header' id='kolom2' preferred='yes' style='float:center;'/>
    </div>
    <div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>
    <b:section class='header' id='kolom3' preferred='yes' style='float:right;'/>
    </div>
    </div>
  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak
Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Semoga artikel cara membuat tiga kolom widget dibawah header ini bermnafaat. Jika ada permasalahan dalam memasang kode, silahkan tinggalkan komentar anda di artikel ini, cara membuat tiga kolom widget dibawah header
Description: Cara Membuat Tiga Kolom Widget Dibawah Header
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Tiga Kolom Widget Dibawah Header
Cara Membuat Dua Kolom Widget Dibawah Header merupakan kelanjutan dari artikel sebelumnya yaitu membuat satu kolom widget diatas dan dibawah header yang pada artikel selanjutnya akan dibahas cara membuat tiga kolom widget dibawah header. Cara membuat dua kolom widget dibawah header ini juga sama ketika anda membuat kolom-kolom yang lain yang masih berada di area header blog serta memiliki fungsi dan kegunaan yang sama.

Cara Membuat Dua Kolom Widget Dibawah Header

Berikut Cara Membuat Dua Kolom Widget Dibawah Header
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode ]]></b:skin>
  4. Salin kode berikut tepat diatas kode ]]></b:skin>
    #twounderheader { clear:both; } .twounderheader-widget { padding:0px 10px 10px 10px; }
  5. Cari kode <div id='main-wrapper'>
  6. Pasang kode berikut tepat diatas kode <div id='main-wrapper'>
    <div id='twounderheader'>
    <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='header' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='header' id='col2' preferred='yes' style='float:left;'/>
    </div>
    </div>
  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak
Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Semoga artikel cara membuat dua kolom widget dibawah header ini bermnafaat. Jika ada permasalahan dalam memasang kode, silahkan tinggalkan komentar anda di artikel ini, cara membuat dua kolom widget dibawah header
Description: Cara Membuat Dua Kolom Widget Dibawah Header
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Dua Kolom Widget Dibawah Header
Cara Membuat Satu Kolom Widget Dibawah Header masih sama dengan ketika anda membuat satu kolom widget diatas header dan bedanya hanya terletak pada penempatan saja. Seperti yang telah saya jelaskan pada artikel sebelumnya, cara membuat satu kolom widget dibawah header ini juga memberikan manfaat bagi anda untuk memasang beberapa konten yang ingin anda tampilkan dibawah header apalagi jika anda membuat dua atau tiga kolom widget. Silahkan anda pelajari cara membuat satu kolom widget dibawah header berikut ini

Cara Membuat Satu Kolom Widget Dibawah Header

Cara Membuat Satu Kolom Widget Dibawah Header
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode ]]></b:sin>
  4. Letakkan kode berikut diatas kode ]]></b:sin>
    #oneunderheader{margin:10px 0;padding:1%;width:100%;}
  5. Cari kode berikut ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>

    </div>
  6. Letakkan kode berikut ini tepat dibawah kode </div> pada no.5
    <div id='oneunderheader'>
    <b:section class='header' id='oneunderheader' preferred='yes'/>
    </div>


    Sehingga hasilnya seperti berikut ini

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section
    >
    </div>
    <div id='oneunderheader'>
    <b:section class='header' id='oneunderheader' preferred='yes'/>
    </div>
  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda
Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Semoga artikel cara membuat satu kolom widget dibawah header ini bermnafaat. Jika ada permasalahan dalam memasang kode, silahkan tinggalkan komentar anda di artikel ini, cara membuat satu kolom widget dibawah header
Description: Cara Membuat Satu Kolom Widget Dibawah Header
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Satu Kolom Widget Dibawah Header
Cara Membuat Satu Kolom Widget Diatas Header seperti yang terlihat pada gambar dibawah (panah merah) telah saya buat khusus untuk anda dengan cara yang mudah, anda bisa membuat satu kolom widget diatas header blog anda dengan mengikuti panduan cara membuat satu kolom widget diatas header. Dengan adanya tambahan satu kolom widget diatas header akan memberikan tambahan ruang dalam blog anda yang nantinya bisa anda gunakan untuk memasukkan konten-konten diluar topik blog anda atau dari dalam topik blog anda sendiri. Apalagi jika di area header blog ditambahkan lagi dua kolom atau tiga kolom widget maka anda akan lebih leluasa dalam memasukkan atau memasang konten-konten yang anda sukai.

Cara Membuat Satu Kolom Widget Diatas Header

Berikut Cara Membuat Satu Kolom Widget Diatas Header
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari Kode ]]></b:skin>
  4. Letakkan kode berikut diatas kode ]]></b:skin>
    #oneupperheader{margin:10px 0;padding:1%;width:100%;}
  5. Cari kode berikut ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
    </div>
  6. Letakkan kode berikut ini tepat dibawah <div id='header-wrapper'>
    <b:section class='header' id='oneupperheader' preferred='yes'/>
    Sehingga hasilnya seperti berikut ini
    <div id='header-wrapper'>
    <b:section class='header' id='oneupperheader' preferred='yes'/>
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
    </div>
  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda
Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Sekian, jika ada ide lain dalam membuat satu kolom widget diatas header, mari kita diskusikan bersama dengan meninggalkan komentar di artikel ini Cara Membuat Satu Kolom Widget Diatas Header
Description: Cara Membuat Satu Kolom Widget Diatas Header
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Satu Kolom Widget Diatas Header
Welcome to My Blog

Popular Post

Labels

Followers

- Copyright © 2013 shad0w-share | Designed by Johanes Djogan -