Tampilkan postingan dengan label blogger. Tampilkan semua postingan
Tampilkan postingan dengan label blogger. Tampilkan semua postingan

24 September 2010

Simple White Blogger Themes

. 24 September 2010
4 comments
Labels: ,

Saat waktu luang saya coba mengutak-atik templates blog saya, dan akhirnya jadilah sebuah Blogger Template yang saya beri  nama Simple White, karena memang bentuknya yang simpl, seperti gambar di bawah  :

simple white kompiku blogger

Feature yang sudah terintegrasi  pada template ini adalah :

  1. Adsense ready
  2. Menu Tab dengan 10 Recent Post dan 10 Recent Comment serta Link
  3. Auto Readmore With Thumbnail
  4. Halaman Navigasi 
  5. Fast Load
Bagi teman – teman yang ingin menggunakan template blogger yang saya design silahkan download di http://www.mediafire.com/?rjxc11ht51rtlke untuk preview di http://demo-white-clean.blogspot.com/

Selengkapnya »»

29 Mei 2010

Menu Tab Autoopen dengan 10 Recent Post dan 10 Recent Comments di blooger

. 29 Mei 2010
1 comments
Labels:

Untuk menghemat tempat dan sekaligus agar blog kita terlihat lebih bagus kita membutuhkan menu tab untuk ditampilkan di halaman blog. cara memasangnya juga tidak terlalu sulit. berikut ini langkah-langkah untuk membuat menutab seperti ini :


menutab_kompiku

 


  1. Login Ke dahsbord bolgger anda –> Layout –> Edit HTML
  2. Masukan kode CSS di bawah ini diantara <b:skin><![CDATA[/* dan ]]></b:skin>

    /* tabs--*/

    div.TabTampil div.TTs
    {margin-top:1em; height: 30px; overflow: hidden; }
    div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
    {color:red;height: 28px; background-color:  #ffffff; }
    div.TabTampil div.Halamans
    { clear: both; border:1px solid #DDDDDD; overflow: hidden; background-color: #ffffff;}
    div.TabTampil div.Halamans div.Halaman
    { height: 100%; padding: 0px; overflow: hidden; }
    div.TabTampil div.Halamans div.Halaman div.Alas
    { padding: 3px 5px; }
    div.TabTampil div.TTs a
    { background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBvQJOeM1ykFCIt3Bd0m0pQCrvkVEjNs1TzoBCeYuidoyr6NLD2vOcydWKB4WpZ5MBDAvLg0uVwyDfUJf4Wko9AN_XvCWY2saWKbiOfoAPNeXlh1MkThKeZj6sI5024bTgvkuxPUsiR4h/s800/post_top.gif) no-repeat scroll center top; border-left:1px solid  #DDDDDD; border-right:1px solid  #DDDDDD; border-top:1px solid #DDDDDD; border-bottom:0px solid  #DDDDDD; float: left;
    display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
    font-size: 12px; font-weight: 900; color: #222}

  3. Masukkan Kode javascript berikut sebelum tag </head> 
    , kode javascript ini yang akan mengambil 10 recent posts dan 10 rcent comments dari blog anda

    <script type='text/javascript'>
    //credit to hoctro. code to create top recent posts
    function c1(){document.getElementById(&#39;link_page&#39;).onclick();}
    function rp(json) {
    document.write(&#39;&lt;ul&gt;&#39;);for (var i = 0; i &lt; numposts; i++) {
    document.write(&#39;&lt;li&gt;&#39;);
    var entry = json.feed.entry[i];
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    posturl = entry.link[k].href;
    break;
    } }
    var posttitle = entry.title.$t;
    posttitle = posttitle.link(posturl);
    var readmorelink = &quot;(more)&quot;;
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0,4);
    var cdmonth = postdate.substring(5,7);
    var cdday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = &quot;Jan&quot;;
    monthnames[2] = &quot;Feb&quot;;
    monthnames[3] = &quot;Mar&quot;;
    monthnames[4] = &quot;Apr&quot;;
    monthnames[5] = &quot;May&quot;;
    monthnames[6] = &quot;Jun&quot;;
    monthnames[7] = &quot;Jul&quot;;
    monthnames[8] = &quot;Aug&quot;;
    monthnames[9] = &quot;Sep&quot;;
    monthnames[10] = &quot;Oct&quot;;
    monthnames[11] = &quot;Nov&quot;;
    monthnames[12] = &quot;Dec&quot;;
    if (&quot;content&quot; in entry) {
    var postcontent = entry.content.$t;
    } else if (&quot;summary&quot; in entry) {
    var postcontent = entry.summary.$t;
    } else
    var postcontent = &quot;&quot;;
    var re = /&lt;\S[^&gt;]*&gt;/g;
    postcontent = postcontent.replace(re, &quot;&quot;);
    document.write(posttitle);
    if (showpostdate == true) document.write(&#39; - &#39; + monthnames[parseInt(cdmonth,10)] + &#39; &#39; + cdday);
    if (showpostsummary == true) {
    if (postcontent.length &lt; numchars) {
    document.write(postcontent);
    } else {
    postcontent = postcontent.substring(0, numchars);
    var quoteEnd = postcontent.lastIndexOf(&quot; &quot;);
    postcontent = postcontent.substring(0,quoteEnd);
    document.write(postcontent + &#39;...&#39; + readmorelink);
    } }
    document.write(&#39;&lt;/li&gt;&#39;);
    }
    document.write(&#39;&lt;/ul&gt;&#39;);
    }

    var numposts = 10; 
    var showpostdate = false; 
    var showpostsummary = false; 
    var numchars = 200;
    </script> 

  4. Masukan Kode berikut pada bagian yang akan anda pasang widget ini : misalnya setelah kode <div id='sidebar-wrapper'>

    <form action='tabtampil.html' method='get'>
    <div class='TabTampil' id='TabTampil'>
    <div class='TTs' style='width: 350px;'> <a onmouseover='tabtampil_ubah(&quot;TabTampil&quot;,1);'> Recent Post</a> <a href='#' onmouseover='tabtampil_ubah(&quot;TabTampil&quot;,2);'> Comments</a> <a href='#' onmouseover='tabtampil_ubah(&quot;TabTampil&quot;,3);'> Links</a></div>
    <div class='Halamans' style='width: 350px; height: 300px;'>
    <div class='Halaman'>
    <div class='Alas'>
    <b:section class='tabcontent' id='recpost' maxwidgets='1' showaddelement='no'>
    <b:widget id='HTML233' locked='false' title='10 Recent Post' type='HTML'/>
    </b:section>
    </div>
    </div>

    <div class='Halaman'>
    <div class='Alas'>
    <b:section class='tabcontent' id='reccom' maxwidgets='1' showaddelement='no'>
    <b:widget id='HTML3' locked='false' title='10 Recent Comments' type='HTML'/>
    </b:section>
    </div>
    </div>

    <div class='Halaman'>
    <div class='Alas'>
    <b:section class='tabcontent' id='reccon' maxwidgets='1' showaddelement='no'>
    <b:widget id='HTML5' locked='false' title='Friends Links' type='HTML'/>
    </b:section>
    </div>

    </div>
    </div>

    </div></form>
    <script src='http://menutab-c11774.googlecode.com/files/newscriptab.js' style='text/javascript'/>
    <script type='text/javascript'>tabtampil_inisial(&#39;TabTampil&#39;);</script>


  5. Selamat Mencoba

    mohon maaf jika script yang saya tampilkan sebelumnya bermasalah yang disebabkan oleh kesalahan penggunaab syntax highlighter



Selengkapnya »»

Menampilkan IP Pengunjung dihalaman Blogger

.
0 comments
Labels:

ip-address Menampilkan IP Adrees Pengunjung di halaman blogger ternyata tidak semudah seperti di halaman web biasa. Berdasarkan hasil googling yang saya lakukan, Javascript untuk menampilkan IP adress tidak dapat berjalan di halaman blogger… Ada sebuah layanan dari myfundoo yang dapat menyelesaikan masalah tersebut….

Selain menampilkan IP Adress, Widget myfundoo ini juga dapat menampilkan OS, Negara dan Browser Pengunjung. Caranya pun sangat mudah seperti berikut:

  • Copy kode yang disediakan sesuai tampilan yang anda inginkan.
  • Masuk ke dashbord blogger anda
  • Layout
  • page elements
  • Pilih new gadget ,pilih html/javascript paste kode click save
salah satu contoh kode dan hasilnya adalah sebagi berikut :
IP
get yours here


akan memberikan hasil seperti ini : ip-address

Selengkapnya »»

27 Mei 2010

Membuat Page Navigataion Number di Blogger

. 27 Mei 2010
3 comments
Labels:

blogger Akan lebih menarik rasanya apabila blog kita memiliki navigasi halaman dengan angka. berikut ini saya tulis kan bagaimana cara membuat navigasi halaman blogger dengan angka seperti gambar di bawah ini :

 

 

pagenav

 

 

  1. Login Ke dahsbord bolgger anda –> Layout –> Edit HTML
  2. Masukan kode CSS di bawah ini diantara <b:skin><![CDATA[/* dan ]]></b:skin>

    /* –- blogger page number navigation start-- */
    .showpageNum a{padding:1px 8px; margin:0 5px; text-decoration:none; border:0px solid #333; background:#f9f9f9; color:#111}
    .showpageOf{margin:0 8px 0 0; color:#222}
    .showpageNum a:hover{border:0px solid #fff; background:#8F2602; color:#fff}
    .showpageArea{margin:10px 0; font-size:16px; color:#111}
    .showpagePoint{color:#fff; text-shadow:#333 0 1px 2px; padding:1px 8px; margin:2px; font-weight:normal; border:0px solid #333; background:#8F2602; text-decoration:none}

  3. Copas Kode Berikut sebelum tag </body>

    <script type='text/javascript'>
    var pageCount=9;
    var displayPageNum=9;
    var upPageWord =&#39;&#171; First&#39;;
    var downPageWord =&#39;Last &#187;&#39;;
    </script>
    <script src='http://blogger-c11774.googlecode.com/files/pagenav_blogger.js' type='text/javascript'/>

  4. Save…

Selengkapnya »»

15 Mei 2010

Membuat template Blogger Sendiri dengan Blogger Template Designer

. 15 Mei 2010
1 comments
Labels:

 

blogger Ingin Membuat Template blogger sendiri? mungkin anda bisa menggunakan layanan blogger yang satu ini….. layanan ini menyediakan template awal yang dapat anda utak-atik dengan menu live preview di bawahnya… OK langsung saja

 

  1. Arahkan browser anda ke alamat http://draft.blogger.com … login dan masuk ke dahshbord blogger anda….
  2. Ada yang berbeda ? iya, selain tampilannya yang sedikit berbeda, juga terdapat menu yang berbeda dari dashbord blogger biasanya.
    langsung saja masuk ke tab design—> Template Designer

    blogger_template.designer2 
  3. Maka anda akan menemukan sebuah layanan design template seperti preview seperti berikut :

    blogger_template.designer

     

  4. Pada layanan ini terdapat 4 menu utama yaitu template yang berisi design template awal, background untuk setting background, Layout untuk setting ukuran-ukuran design, dan Advance untuk mengatur css…

  5. Selamat Berkreasi dan Mengexplorasi layanan blogger yang satu ini…

Selengkapnya »»

09 Mei 2010

Free Download Puluhan Koleksi Blogger Templates Pilihan

. 09 Mei 2010
0 comments
Labels:

bloggerlogo sodah bosan dengan templates lama anda?? atau Anda sedang mencari koleksi templates untuk tampilan blogger anda??

 

free_blogger

silahkan kunjugi halaman web page ini, berbagai jenis dan model templates blogger terbaik dikumpulkan disini. selain link download, juga tersedia live preview template sehingga anda benar-benar yakin untuk menggunakan templates tersebut

 

DOWNLOAD DI SINI

Selengkapnya »»

29 April 2010

Membuat Auto Readmore pada Blogger

. 29 April 2010
0 comments
Labels:

blogger Biar gak susah masang readmore pada blog anda, berikut ini cara membuat autoreadmore plus thumbnail imagesnya

 

  1. Pertama, masuk ke dashbord blogger anda –> EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> , Langsung copy paste aja kode dibawah ini:

    <script type='text/javascript'>
    var thumbnail_mode = "float" ;
    summary_noimg = 250;
    summary_img = 250;
    img_thumb_height = 120;
    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>

  2. Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode <data:post.body/>, Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini :

    <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("summary<data:post.id/>");</script>
    <span style="float: left" class="rmlink"><a expr:href="data:post.url">READ MORE -<data:post.title /></a></span>
    </b:if>
    <b:if cond="data:blog.pageType == &quot;item&quot;"><data:post.body /></b:if>

  3. kalau anda sudah memasang readmore versi lama, hapus dulu kode yang dicetak tebal berikut :

    <div class='post-header-line-1'/>
    <div class='post-body'>
    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <a expr:href='data:post.url'>Readmore</a>
    </b:if>
    <div style='clear: both;'/>

Selengkapnya »»

01 Maret 2010

Menampilkan Related Post Blogger dengan Mode Thumbnail

. 01 Maret 2010
1 comments
Labels:

blogger Lansung saja ya, login ke blogger dashboard masuk ke tab Layout > Edit HTML > Check "Expand Widget Templates" .kalo udah login lakukan step-step berikut :

  1. Cari Tag </head>, Replace dengan Kode Berikut : 

    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }

    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }

    #related-posts  a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX6YNCeFbLPtfrJ32KVkj9-DJ725V8viHN7IKxw5juUagwfhgkkn5MvJBaC33xKPwCJuaxupijpqUwA4_k7JTGxVdiGiE8VKRbKla93adBt4yLeYlXKv1SrP2QWKF_PlkShSz_X1RnWk/s400/noimage.png";
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="Related Posts";
    </script>
    <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
    </head>






  2. Cari Tags 

    <div class='post-footer-line post-footer-line-1'>


     atau 


    <p class='post-footer-line post-footer-line-1'>




  3. kalau sudah ketemu salah satunya, letakkan kode berikut setelah tags tersebut : 




    <!-- Related Posts with Thumbnails Code Start-->
    <!-- remove -->    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
    </script>
    </div><div style='clear:both'/>
    <!-- remove --></b:if> 
    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
    <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
    </b:if></b:if>
    <!-- Related Posts with Thumbnails Code End-->







Anda dapat menyesuaikan jumlah realted post yang muncul dengan menyesuaikan kode berikut :

var maxresults=5;


Ok .. selamat mencoba

Selengkapnya »»

28 Oktober 2009

Export Import Posting dan Comment dari Blogger

. 28 Oktober 2009
3 comments
Labels:

blogger Anda dapat mengekspor, mengimpor entri dan komentar dari blog Blogger yang telah diekspor sebelumnya. Selain untuk berjaga-jaga dari hal yang tidak diinginkan, dengan fasilitas export import ini anda dapat menggabungkan posting dari blog yang satu dengan blog yang lain.

 

Eksport Blog

 

  1. Masuk ke Blogger dashbord –>  Pengaturan –> Dasar –> Klik Ekspor Blog

    exp
  2. lalu klik Download/Unduh blog dan simpan hasil download blog anda dalam format xml

    dexp 

Import Blog

  1. Bila anda mempunyai beberapa blog di blogger dan anda ingin menyatukannya anda dapat mengeksport blog yang satu lalu anda buka blog lainnya lalu pilih impor blog

    imp 
  2. browse file xml hasil ekspor –> masukan kode verifikasi –> cek Terbitkan semua entri yang diimpor secara otomatis (bila anda ingin semua enteri hasil impor langsung diterbitkan) –> Impor Blog
  3. Tunggu sampai muncul pesan seperti gambar berikut :

    impres

    maka proses impor telah berhasil dengan sukses.

 

sedangkan untuk eksport dari blogger ke wordpress dapat dilakukan dengan cara berikut :

  1. login ke akun wordpress
  2. klik Perkakas > klik Impor > pilih Blogger > klik Beri kuasa
  3. Login ke blogger jika belum > Berikan Akses
  4. Pilih blog yang akan diimpor
  5. Klik Impor. maka semua posting dan comment dari blog tersebut akan tercopy ke Wordpress.

Selengkapnya »»

25 Oktober 2009

Menambahkan Animasi Flash Tag Cloud Pada Label Blogger

. 25 Oktober 2009
2 comments
Labels:

blogger sebenarnya sudah banyak yang nulis cara masang tag cloud label dengan flash seperti gambar di bawah ini :
label
namun karena ada rekan yang menanyakan, saya iku juga menuliskan topik di atas. berikut ini caranya :

  1. Masuk ke Dashbord Blogger--> Tata Letak --> Edit HTML ---> Centarng Expand Widget Content
  2. Kalau diblog kamu sudah terpasang widget label ---> cari (ctrl+f) kode berikut : <b:widget id='Label
  3. delete semua kode dari <b:widget id='Label............> s.d. </b:widget> lalu ganti dengan script yang ada di bawah
  4. kalau di blog kamu belum ada widget Label cari kode berikut <b:section class=.……  ( classnya tergantung tempalte blog kamu misalnya sidebar dll) lalu copas saja script berikut dibawahnya
ini scripnya, met mencoba ya

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <script src='http://sites.google.com/site/ruangsc/enes/swfobject.js' type='text/javascript'/>
    <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
    <script type='text/javascript'>
    var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
    // uncomment next line to enable transparency
    //so.addParam("wmode", "transparent");
    so.addVariable("tcolor", "0x333333");
    so.addVariable("mode", "tags");
    so.addVariable("distr", "true");
    so.addVariable("tspeed", "100");
    so.addVariable("tagcloud", "<tags>
    <b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
    so.addParam("allowScriptAccess", "always");
    so.write("flashcontent");
    </script>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>

Selengkapnya »»

22 Oktober 2009

Read More Widget dari Blogger

. 22 Oktober 2009
3 comments
Labels:

blgger Sekarang blogger sudah menyediakan fasilitas read more, sehingga anda yang memiliki blog di blogger tidak perlu repot menambahkan script untuk menambah fasilitas tersebut. anda cukup melakukan hal berikut :

 

Masuk ke Setting/pengaturan ---> pilih Editor yang diperbarui

 

setting

 

Maka editor enteri blogger anda akan ada sebuah fitur baru yaitu insert jump break yang berfungsi untuk menambahkan

 

 

setting2

 

anda tinggal klik ikon diatas untuk menyisipkan Read More, sehingga muncul garis seperti dibawa ini

 

setting5

 

jika anda ingin merubah Read More dengan kalimat lain klik Layout ----> Klik Edit pada Posting Blog

 

setting4

Pada opsi teks tautan lama entri anda dapat mengganti Read More dengan kata lain sesuai keinginan anda

 

setting3

Selengkapnya »»

07 Mei 2009

3 Koleksi Blogger Theme Pilihan

. 07 Mei 2009
3 comments
Labels:

 creative_art_blogger_template gamezine_blogger_template zinmag_remedy_blogger_template

Anda sedang mencari template blogger? mungkin 3 template diatas bisa anda coba.

 

 

1. creative_art_blogger_template
Author: FreeThemeLayout/DreamTemplate Author URI: http://www.freethemelayouts.com/
2 gamezine_blogger_template

Theme Name    : Gamezine Blogger Template (BT)
Description    : 3 coloumn pro gamer theme
Versions    : Cahaya Versions

Author        : Daru Kurniawan Ahmadi
Author URL     : http://cahayabiru-sphere.blogspot.com

3 zinmag_remedy_blogger_template
Theme Name: Zinmag Remedy
Theme URI: http://web2feel.com/remedy/  Author: jinsona designs Author URI: www.wpfreethemes.com
Converted to blogger template by FalconHive.com Theme URI: http://www.falconhive.com/2008/12/blogger-template-zinmag-remedy.html Version: 1.00 Author URI: http://www.falconhive.com

 

Download

Selengkapnya »»

24 April 2009

Form Comment Blogger Gak Bisa Dipake

. 24 April 2009
6 comments
Labels: ,

Memang sungguh menyebalkan, setelah sekian lama bersabar dengan koneksi Indosat 3G yang pas-pasan, saya tetap harus tambah sabar lagi karena setiap kali buka blog sendiri maupun blog teman yang pake blogger halaman comment gak bisa dipakai. beginilah screenshot kalau saya buka halaman blogger dengan indosat 3G.

 

comment-box

 

Pilihan Beri komentar sebagai tidak muncul, sehingga saya tidak bisa memberi komentar ataupun menanggapi komentar. diantara saudara-saudara ada yang bisa kasih solusi gak?

 

Benci Tapi Butuh. Begitulah perasaanku pada Indosat 3G… Aku benci karena koneksi yang sering lemot…. tapi kalau dilepas aku sudah terlanjur sayang (habis gak ada pilihan lain). Kalau untuk pindah ISP kurasa sama saja, memang kemampuan ISP indonesia belum baik tapi maunya melayani semua pengguna internet.

Selengkapnya »»

15 April 2009

Menampilkan 10 Recent Post dan Recent Comments di Blogger

. 15 April 2009
7 comments
Labels:

blgger Berbeda dengan Wordpress yang dilengkapi dengan fasilitas untuk menampilkan Recent Post dan Recent Comment, blogger tidak dilengkapi dengan fasilitas tersebut. Hal ini membuat para pengguna blogger harus berusaha sendiri untuk mencari cara menampilkan recent post dan recent comment pada blognya. Ada banyak cara untuk melakukan hal diatas, bisa dengan menggunakan feed sebagai berikut:

  1. dari Dashbord Blogger Anda Masuk ke Tata Letak ----> Elemen Halaman
  2. klik Tambah Elemen -----> lalu pilih Feed

    feed
  3. setelah keluar kotak seperti di bawah ini , masukan kode berikut:
    http://NAMABLOG_KAMU.blogspot.com/feeds/posts/default


    konfig-feed

  4. Lanjutkan Hingga Selesai
  5. untuk menampilkan recent comment anda tinggal merubah posts menjadi comments sehingga menjadi seperti berikut : http://NAMABLOG_KAMU.blogspot.com/feeds/comments/default

Kelemahan cara di atas adalah hanya dapat menampilkan 5 Recent Post dan 5 Recent Comments. agar dapat mnampilkan recent post dan recent comment lebih dari 5 kita dapat gunakan cara berikut :

  1. dari Dashbord Blogger Anda Masuk ke Tata Letak ----> Elemen Halaman
  2. klik Edit HTML-----> Centang Expand Tempalte Widget
  3. Cari Kode Berikut : ]]></b:skin> atau sebelum </head>
  4. Masukan kode Javascript berikut :

    <script type='text/javascript'>
    //credit to hoctro. code to create top recent posts
    function rp(json) {
    document.write(&#39;&lt;ul&gt;&#39;);for (var i = 0; i &lt; numposts; i++) {
    document.write(&#39;&lt;li&gt;&#39;);
    var entry = json.feed.entry[i];
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    posturl = entry.link[k].href;
    break;
    } }
    var posttitle = entry.title.$t;
    posttitle = posttitle.link(posturl);
    var readmorelink = &quot;(more)&quot;;
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0,4);
    var cdmonth = postdate.substring(5,7);
    var cdday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = &quot;Jan&quot;;
    monthnames[2] = &quot;Feb&quot;;
    monthnames[3] = &quot;Mar&quot;;
    monthnames[4] = &quot;Apr&quot;;
    monthnames[5] = &quot;May&quot;;
    monthnames[6] = &quot;Jun&quot;;
    monthnames[7] = &quot;Jul&quot;;
    monthnames[8] = &quot;Aug&quot;;
    monthnames[9] = &quot;Sep&quot;;
    monthnames[10] = &quot;Oct&quot;;
    monthnames[11] = &quot;Nov&quot;;
    monthnames[12] = &quot;Dec&quot;;
    if (&quot;content&quot; in entry) {
    var postcontent = entry.content.$t;
    } else if (&quot;summary&quot; in entry) {
    var postcontent = entry.summary.$t;
    } else
    var postcontent = &quot;&quot;;
    var re = /&lt;\S[^&gt;]*&gt;/g;
    postcontent = postcontent.replace(re, &quot;&quot;);
    document.write(posttitle);
    if (showpostdate == true) document.write(&#39; - &#39; + monthnames[parseInt(cdmonth,10)] + &#39; &#39; + cdday);
    if (showpostsummary == true) {
    if (postcontent.length &lt; numchars) {
    document.write(postcontent);
    } else {
    postcontent = postcontent.substring(0, numchars);
    var quoteEnd = postcontent.lastIndexOf(&quot; &quot;);
    postcontent = postcontent.substring(0,quoteEnd);
    document.write(postcontent + &#39;...&#39; + readmorelink);
    } }
    document.write(&#39;&lt;/li&gt;&#39;);
    }
    document.write(&#39;&lt;/ul&gt;&#39;);
    }

    var numposts = 10;
    var showpostdate = false;
    var showpostsummary = false;
    var numchars = 100;
    </script>

  5. Carilah kode <b:section class='sidebar' id='sidebar' (class dan id bisa berbeda-beda tergantung sang pembuat template).
    bila tidak ketemu paling tidak pada cari kode <b:section
  6. Letakan kode berikut tepat di bawah kode no.5. di atas. Anda dapat memindah dan mengatur ulang letaknya dari elemen halaman agar lebih mudah.

    Kode Berikut Untuk Menampilkan Recent Post


    <b:widget id='HTML112' locked='false' title='Recent Post' type='HTML'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <h2 class='title'><data:title/></h2>
    <div class='widget-content'>
    &lt;script src=&quot;/feeds/posts/default?orderby=published&amp;amp;alt=json-in-script&amp;amp;callback=rp&quot;&gt;&lt;/script&gt;
    </div>
    <b:include name='quickedit'/>
    </b:includable>
    </b:widget>


    Kode Berikut Untuk Menampilkan Recent Comment


    <b:widget id='HTML113' locked='false' title='Recent Comments' type='HTML'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <h2 class='title'><data:title/></h2>
    <div class='widget-content'>
    &lt;script src=&quot;/feeds/comments/default?orderby=published&amp;amp;alt=json-in-script&amp;amp;callback=rp&quot;&gt;&lt;/script&gt;
    </div>
    <b:include name='quickedit'/>
    </b:includable>
    </b:widget>

Anda dapat mengatur berapa jumlah recent post dan recent comment dengan merubah kode var numposts = 10;

Selengkapnya »»

28 Maret 2009

Mengenal Bagian Template Bloger : section dan widget

. 28 Maret 2009
8 comments
Labels:

blggerBagi anda yang punya blog di blogger dan suka mengutak atik template blog anda, dan belum mengetahui bagian bagian template blogger berikut ini akan saya coba sedikit ulas anatomi dasar template blogger agar anda tidak salah edit.
Kerangka dasar sebuah template blogger adalah sebagai berikut :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*


<!—ISI SKIN—>


]]></b:skin>
</head>
<body>


<!—ISI BODY—>


</body>
</html>

Bagian yang berwarna merah adalah bagian yang biasanya dimodifikasi oleh para template designer.

  • Bagian Skin yang terletak diantara tag <b:skin><![CDATA[/* dan ]]></b:skin> biasanya berisi kode CSS untuk mengatur tampilan blogger.
  • Sedangkan Body yang terletak diantara tag <body> dan </body> berisi section dan Widget yang tampilannya telah diatur dengan kode CSS di bagian Skin.

Mengenal Elemen Body : Section dan Widget

  1. Section
    Section adalah area dari halaman blogger seperti header,sidebar,main, footer dsb. Contoh penulisan tag section untuk header misalnya sbb:



    <b:section id='header' class='header' maxwidgets="1" showaddelement="no">

    <!—-letak widget disini-->

    </b:section>

    Atribut section adalah sbb :

    No. Atribut Sifat Keterangan
    1 id wajib sebagai identitas section. Harus identik, tidak boleh ada section dengan id yang sama. id diatur dalam bagian Skin dengan awalan #.
    2 Class Optional nama class umumnya navbar,sidebar, header,main dan footer, identitasnya diatur dalam bagian Skin dengan awalan .(titik).
    3 maxwidget Optional Untuk mengatur jumlah maksimum widget yang akan dimuat dalam section tersebut.
    4 showaddelement Optional nilainya hanya “yes” dan “no”. bila bernilai “yes” maka akan muncul link untuk menambah widget / gadget seperti gambar dibawah, sedangkan jika bernilai “no”, maka link tsb tidak ditampilkan seperti pada contoh section untuk header diatas.


    sec_add Section dengan Atribut showaddelement bernilai “yes”
    hasil_header Section dengan Atribut showaddelement bernilai “no” (setelah diisi widget header)


  2. Widget
    widget adalah elemen halaman yang dapat berupa archive, feed, header, gambar, adsense, profil dll.

    <b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <!—isi widget-->
    </b:widget>
    No Atribut Sifat Keterangan
    1 id wajib sebagai identitas widget. Harus identik,
    2 type wajib nilainya Blog, Archive, Blog, Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar,VideoBar, atau NewsBar
    3 locked optional nilainya hanya “yes” dan “no”. bila bernilai “yes” maka widget dapat dipindahkan ke section yang lain pada elemen halaman. bila bernilai “no” widget tidak dapat dipindahkan atau dihapus pada elemen halaman
    4 title optional Judul Widget

Selengkapnya »»
Langganan: Postingan (Atom)
 
Kompiku.com Powered ByBlogger.com