1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

[SHARE] Tanya Jawab Tentang Template Blogger/ Blogspot

Discussion in 'Blogger/Blogspot' started by www.edikomputer.com, May 16, 2012.

Page 1 of 3
  1. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    View attachment 19801

    Official Site
    www.blogger.com


    Tujuan TS membuat thred ini
    ​
    Ketentuan
    ​
    Index Tutorial template Blogger/Blogspot
    ​

    untuk sementara index masih sedikit kalo ada yang baru akan di update di page 1
     
    Last edited: Jul 17, 2012
    www.edikomputer.com, May 16, 2012
    #1
    tetot, apaaja, ardhe_alief and 4 others like this.
  2. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    Struktur Dasar template blogspot

    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html >
<head>
<meta charset='UTF-8'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.title/></title>
<b:skin><![CDATA[
/*bagian ini untuk css*/
]]></b:skin>
</head>
<body>
<header id="headerwrap">
<b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='judul blog (Header)' type='Header'/>
</b:section>
</header>
<section id="mainwrap">
<b:section class='main section' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</section>
</body>
</html>


    ---------- Post added at 06:39 PM ---------- Previous post was at 06:37 PM ----------

    Menghilangkan Navbar

    sisipkan kode berikut di atas kode <body>

    Code:
    <!-- <body><div></div> -->
     
    www.edikomputer.com, May 16, 2012
    #2
    ifvan17 and Dwipangga like this.
  3. unregistered000

    unregistered000 Hero

    Joined:
    Mar 1, 2012
    Messages:
    607
    Likes Received:
    71
    nice thread.. semoga di sticky

    mau tanya.. kalo mau membuat template dasar nya apa ya?
    bisa tidak kalo mbuatnya tidak menggunakan software instan macam artisteer?
     
    unregistered000, May 16, 2012
    #3
  4. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    untuk template dasar udah ane ksih tuh gan kodenya, itu adalah template blank blogspt artinya tidak ada tampilan seprti lebar kemudian batas kanan dan kiri dlsb.

    untuk edit tentu bisa gan yang penting agan tau css dan html, ane pernah pake softwar artister tapi tampilnya itu-itu aja dan keliatn nggak profesional akan lebih bangga jika menggunakan template sendiri :senyum:
     
    www.edikomputer.com, May 16, 2012
    #4
  5. laskarpelangi

    laskarpelangi Newbie

    Joined:
    Apr 15, 2012
    Messages:
    29
    Likes Received:
    0
    Location:
    bondowoso
    gan, nanyak donk, caranya bikin menu bar di blogspot itu gimana yaks?
    ane nyoba googling tapi malah kaga ngarti maksutnya.
    mohon bantuan dan pencerahannya ya gan.
    trimakasih banyak sebelumnya.
     
    laskarpelangi, May 16, 2012
    #5
  6. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    maksudnya menu kayak Home | About | contact us , gitu ya gan

    oke kalo itu ane kasih cara + penjelasannya gan

    menu navbar di blogger terdiri dari kode css dan html
    kode css adalah untuk menata letak dan tampilannya seperti ukuran font, jarak antar menu dlsb
    kode html adalah kode untuk menempatkan teks dengan memanggil code css tadi


    ini kode cssnya dan di letakkan sebelum kode ]]></b:skin>
    Code:
    /* ------ navbar ------------- */
#navbar-iframe, .widget-item-control{display:none!important}
body{color:#333;font-size:12px;font-family: Futura Md BT,Comic Sans MS,verdana,Sans-erif;margin:0 auto;padding:0}
#NavbarMenu{width:890px;height:32px;background: #333;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:2px auto;}
#NavbarMenuleft{width:100%;float:left;margin:0;padding:0}
/*-- (Menu/Nav) --*/
#nav{z-index:1;background: #333; padding:2px 0 5; margin-bottom:0px; clear:both; margin:0 auto;height:32px;}
#nav,#nav ul{list-style-type:none;list-style-position:outside;position:relative;text-align:left;font-size:12px;font-family:Arial;padding:0px 1px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#nav a{height:24px;display:block;color:#fff;text-decoration:none;background:none;padding:5px 6px 1px 6px;border-left:1px solid #444; border-right:1px solid #222;}
#nav a:hover{ color:#e5e5e5;}
#nav li{float:left;position:relative;padding:0px 0px}
#nav ul{position:absolute;display:none;top:100%;width:164px;left:0;background:#333;border-top:1px solid #444; border-bottom:1px solid #222;}
#nav li ul a{border-top:1px solid #444; border-bottom:1px solid #222;width:150px;float:left;}
#nav ul ul{top:auto;background:none}#nav li ul ul{left:11.76em;background:#333;margin:0px 0px 0px}
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul{display:none}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}
/* ------ end navbar ------------- */
    nah untuk kode pemanggilanya atau kode yang akan ditampilkan

    Code:
    <div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='[U]#[/U]'>Depan</a></li>
<li><a href='#'>Tentang Kami</a></li>
<li><a href='#'>Syarat dan Ketentuan</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Order</a></li>
<li><a href='#'>Cara Order</a></li>

<li><a href='#'>Hubungi Kami</a></li>
<li><a href='#'><blink>promo</blink></a></li>
</ul>
</div>
</div>
     
    www.edikomputer.com, May 16, 2012
    #6
  7. pancuraji

    pancuraji Super Hero

    Joined:
    Mar 6, 2011
    Messages:
    1,690
    Likes Received:
    55
    Ijin bukmark gan.. Kalau ada template yg bagus boleh juga sekalian dishare gan he he..
     
    pancuraji, May 16, 2012
    #7
  8. newbisa

    newbisa I'm Blogger Lovers

    Joined:
    Dec 13, 2010
    Messages:
    2,417
    Likes Received:
    539
    Location:
    DigitalJV.com
    maaf bukannya di forum udh komplit yah mengenai blogger, setau ane sih gitu,. hehe :D

    tp klo mo ditambah lebih komplit lagi ama TS mantap dah,. ditunggu lanjutan sharenya gan :senyum:
     
    newbisa, May 16, 2012
    #8
  9. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    Membuat Iklan melayang di blogspot

    Code:
    <style> #topbar { height:30px; width:auto; background: #FFFFFF; background-repeat:repeat-x; text-align:left; padding-top:4px; } #adsground { height:auto; margin:0 auto; width: 728px; background:#transparent; border-bottom:0px #005094 solid; border-right:0px #005094 solid; border-left:0px #005094 solid; text-align:Center; padding:4px; }   #headlineatas { opacity:1.0; height:auto; width:auto; position:fixed; top:65px; left:170px; border-bottom:0px #005094 solid; border-bottom:0px blue solid; color:#transparent; padding:0px; z-index:1001; font-size:13px;} </style> <script type="text/javascript"> function getValue() { document.getElementById("headlineatas").style.display = 'none'; } </script> <div id="headlineatas"> <div id="topbar"> <img align="left" style="padding-left:2px;" src="http://2.bp.blogspot.com/_9dVTSpL1tT8/TUPbnk55NmI/AAAAAAAAAVQ/KYO0e0gb3ts/s1600/logo-nav.png" /> <span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em">Space Ads</span> <span style="color:#fff;font-size:13px;font-weight:normal;float:right;padding-top:3px;padding-right:10px"><a href="http://www.edikomputer.com" target="_blank" onclick="getValue()">close</a></span> </div> <div id="adsground">  <h3>Download </h3> <p align="left"><h3></h3></p>  <!-- script adsense disini -->  </div></div> </div>
     
    www.edikomputer.com, May 17, 2012
    #9
  10. TeknoInform

    TeknoInform Ads.id Pro

    Joined:
    Dec 26, 2011
    Messages:
    262
    Likes Received:
    7
    Gan..gimana cara buat bikin template blogger dijadiin news agregator, jadi kita ngambil feed dari situs lain buat jadiin postingan secara otomatis.
    Trus waktu mau readmore ,akan menuju ke web asalnya...
    :D

    *maaf kalo tidak sesuai topik
     
    TeknoInform, May 17, 2012
    #10
  11. kuncah

    kuncah Ads.id Pro

    Joined:
    Aug 31, 2011
    Messages:
    435
    Likes Received:
    16
    Location:
    Yogyakarta - Batam
    di buat daftar isi di hompage treadhnya gan, biar ngk pada susah nyari nyari dan yang mau tanya sudah dapat jawaban..
    saran saya sih gitu aja biar rapi dikit !!
     
    kuncah, May 17, 2012
    #11
  12. indra_sinatra

    indra_sinatra Hero

    Joined:
    Nov 5, 2011
    Messages:
    577
    Likes Received:
    15
    Location:
    Medan, Indonesia
    thread bagus ini.

    cocok buat para blogger mania.
     
    indra_sinatra, May 17, 2012
    #12
  13. raemon

    raemon Ads.id Pro

    Joined:
    Dec 28, 2011
    Messages:
    371
    Likes Received:
    3
    bumark dulu om...
    lg belajar template blogspot jg nih....:swt2::swt2:
     
    raemon, May 17, 2012
    #13
  14. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    ini scriptnya gan
    Code:
    <script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://www.edikomputer.com/feeds/posts/summary/-/News?max-results=8&alt=json-in-script&callback=recentpostslist"></script>
</div>
    ganti url www .edikomouter .com dengan url yang akan di jadikan feed news

    nb : ini hanya bekerja untuk engine web yang menggunakan blogger kalo kaya vivanews atau detik ane belom nyoba ntar kalo ane bisa ane share dimari gan

    ---------- Post added at 04:50 PM ---------- Previous post was at 04:46 PM ----------
    kan udah ane index gan di halaman depan yng judulnya

    Index Tutorial template Blogger/Blogspot
     
    www.edikomputer.com, May 17, 2012
    #14
    abdiman and Pixichu like this.
  15. Pixichu

    Pixichu Ads.id Fan

    Joined:
    Dec 11, 2011
    Messages:
    175
    Likes Received:
    2
    Location:
    DIY
    Gan gimana cara buat theme toko online, mksutnya posting diisi thumbnail gambar trus berjejer...kyk online store, cz ane cari2 theme online store gk ada yg sesuai :lol:
     
    Pixichu, May 17, 2012
    #15
  16. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    Cara membuat readmore otomatis

    manfaat menggunakan readmore otomatis agar postingan terlihat rapi dan membatai karakter tulisan sehingga postingan tidak memanjang
    tapi script ini ada kekurangannya juga yaitu nggak bisa nampilin halaman page

    oke langsung saja ikuti langkahnya gan sebelumnya centang dulu tulisan Expand Widget Templates

    cari kode </head> lalu copy code ini di atasnya untuk mempermudah pencarian tekan CTRL+F

    Code:
    [/B]<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.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);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>[B]

    kalo sudah cari lagi kode ini     <data:post.body/> kemudian ganti dengan kode ini

    Code:
    [/B]<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span> 
<b:else/>
<data:post.body/>
</b:if>
[B]


    NB : tulisan Read More.. bisa di ganti dengan teks lain misalnya Baca Selengkapnya ..


    ---------- Post added 05-18-2012 at 10:12 AM ---------- Previous post was 05-17-2012 at 08:38 PM ----------

    Cara Menampilkan Jumlah Posting dan Komentar ini scriptnya gan pasang di widget script Buat total post script buat total comments
     
    www.edikomputer.com, May 18, 2012
    #16
  17. TeknoInform

    TeknoInform Ads.id Pro

    Joined:
    Dec 26, 2011
    Messages:
    262
    Likes Received:
    7
    @edikomputer
    Udah tak coba berhasil gan...kalo biar waktu judul berita diklik trus muncul uraian singkat tentang berita itu, dan ada pilihan baca selengkapnya disini (web asal)...
    Gimana gan?
    *maaf nanya2 mulu..
    :(
     
    TeknoInform, May 18, 2012
    #17
  18. yonocode

    yonocode Ads.id Pro

    Joined:
    Jun 25, 2010
    Messages:
    329
    Likes Received:
    14
    gan ane mau tanya kenapa template ane saya upload gambar untuk header gak bisa muncul ya

    templatenya rounders
     
    Last edited: May 19, 2012
    yonocode, May 18, 2012
    #18
  19. www.edikomputer.com

    www.edikomputer.com Ads.id Fan

    Joined:
    May 12, 2012
    Messages:
    103
    Likes Received:
    76
    kalo muncul uraian ane belom ngerti tapi kalo pilihan buat baca selengkapnya ane tambahin kode ini dibawahnya gan


    Code:
    <a href="http://www.edikomputer.com/search/label/Game" style="float:right;font:normal 10px Arial;padding:5px 0;">Selengkapnya..ยป</a>
    kayaknya agan pake template yang lama ya? coba gunakan template yang baru gan
     
    Last edited: May 19, 2012
    www.edikomputer.com, May 19, 2012
    #19
  20. yonocode

    yonocode Ads.id Pro

    Joined:
    Jun 25, 2010
    Messages:
    329
    Likes Received:
    14
    agan tahu linknya ndak gan...biar ane check karena ane ubeg2 google ga nemu yang ada headernya
     
    yonocode, May 19, 2012
    #20
Page 1 of 3

Share This Page