Cara membuat Rating Rich Snippets otomatis setiap posting -





Photobucket
Cara membuat Rating Rich Snippets otomatis setiap posting - Kemarin sempat membuat widget rating di setiap posting namun menurut saya gagal total. Maka dari itu saya mencoba mencari informasi baru dan hasilnya saya mendapatkan tutorial baru membuat rating otomatis di setiap posting.

Rating ini adalah Rating rich snippets, nanti jika anda sukses di setiap posting anda akan terlihat sebuah rating saat di cari di mesin pencari google. Untuk orang yang tidak tahu tentang rating ini, maka mereka menganggap blog yang memiliki rating menjadi blog rekomendasi.

Bagi yang sudah menunggu tutorialnya, langsung di praktekkan cara di bawah ini

1. Sebelumnya anda harus memiliki akun Google plus, jika belum silahkan daftar dulu
2. Jika sudah punya masuk profil Goole plus dan ambil linknya, seperti contoh ini https://plus.google.com/118253633470029548238
3. Masuk blogger, pilih rancangan dan pilih submenu Edit HTML
4. Sebelum mengedit template backup dulu templatenya untuk mencari aman
5. Centang Expand widget
6. Masukkan kode di bawah ini tempat di bawah kode <head>
<b:if cond='data:blog.url == data:blog.homepageUrl'><link href='https://plus.google.com/118253633470029548238' rel='publisher'/>
</b:if>
 NB : yang berwarna merah ganti dengan link Google Plus anda

7. Setalah itu masukkan kode di bawah ini dan tempatkan tempat di bawah kode <body>
<div><div itemscope='' itemtype='http://data-vocabulary.org/Review'>
8. Masukkan kode di bawah ini dan letakkan tepat di atas kode </body>
</div></div>
 9. Setelah selesai semua, sekarang tinggal membuat rating otomatisnya agar di setiap posting ada infonya, oke langsung saja, masukkan kode di bawah ini tepat di bawah kode <data:post.body/>
Description: <span itemprop="description"><data:post.title/></span>
Rating: <span itemprop='rating'>4.5</span>
Reviewer: <span itemprop='reviewer'><data:post.author/></span> -
ItemReviewed: <span itemprop='itemreviewed'><data:post.title/></span>
 Selesai semua simpan,

Untuk pengecekan apakah sukses atau tidak masuk di sini, dan masukkan 1 posting anda untuk mereview apakah sukses ataukah tidak, jika sukses di artikel pencarian akan ada bintang berwarna emas.
le texte existent réellement à ce lien


Lihat Selengkapnya Beri Komentar


Cara membuat mode penyimpanan energi pada blog



 Berikut ini adalah cara- caranya :
Ikutin ya gan??

  1. Masuk ke akun blog ( blogspot ) anda. Bila sudah.
  2. Pilih "Design" kemudian pilih "Edit HTML" 
  3. Sebaiknya backup dulu blog anda dengan mengklik link "Download Full Template" 
  4. Beri ceklis pada kotak "Expand widget templates" 
  5. Cari kode </head> ( pada browser mozilla firefox, anda bisa menggunakan "Ctrl+F" )
  6. Setelah itu copas kode berikut ini tepat diatas kode yang tadi :
Gimana gan ? mudah kan?

Sekian,
Selamat mencoba
le texte existent réellement à ce lien


Lihat Selengkapnya Beri Komentar


Menghilangkan Page Header Blogspot Dan Mengganti Dengan Widget Lain



Seperti yang kita tahu, page header merupakan bagian dari blog yang berisi judul, dan deskripsi blog. Pada blogger, page header  biasanya terletak pada bagian paling atas pada template yang di gunakan. Pada page header kita juga bisa menempelkan atau menyisipkan gambar sebagai pengganti. Kita bisa mengaksesnya melalui dasbor >> rancangan, lalu edit header. Kadang kala, kita butuh menghilangkan (menghapus) page header untuk alasan kostumasi dengan berbagai macam tujuan. Ada yang mungkin hanya ingin menghilangkannya, atau ingin memasang iklan sebagai penggantinya, atau mungkin alasan-alasan lain.Untuk menghilangkan header blogspot, kita tidak bisa melakukannya secara langsung pada pengaturan. Diperlukan sedikit modifikasi kode html pada template blog kita. Silakan ikuti petunjuk berikut untuk menghapus page header.

Pertama masuk ke akun blogger anda
Lalu masuk ke halaman dasbor
Klik menu Design/Rancangan, pilih Edit HTML
Centang kotak kecil di pojok kanan atas yang tulisannya “ Expand Widget Templates ”
Selanjutnya Cari kode yang mirip seperti di bawah ini :

.showaddelement=’no‘/>
<b:widget id=’header’ locked=’true‘

Hapus dan ganti tulisan no dengan yes dan tulisan true dengan false.
Lalu simpan perubahannya.

Kembalilah ke halaman Design/Rancangan, atau bisa dari dasbor klik Rancangan.
Kemudian klik edit pada widget page header (yang berisi judul blog).
Setelah itu pilih Hapus atau Remove
Jika sudah, maka widget header sudah hilang, dan berganti menjadi tulisan Tambah Gadget atau Add Gadget. (smbr: ahyarayank.co.cc)
le texte existent réellement à ce lien


Lihat Selengkapnya Beri Komentar


Cara membuat Header Menjadi dua Kolom ( templete Baru)




Kalau kita lihat header pada blogger bawaan akan terlihat satu kolom panjang yang terletak di bawah Nav Bar ...emang udah dari sono nya bentuk nya kayak gitu he he..ada suatu keinginan saya untuk membagi header menjadi dua kolom akhir nya saya cari di search engine dan setelah menemukan kode html trus saya coba untuk mengobok-obok blog saya ,,awal nya sih masih rada-rada susah maklum saya masih bodoh tentang kode-kode html dan setelah membanting tulang,memeras keringat dan menghabiskan berbatang-batang rokok ahh,,,akhir nya saya berhasil juga...

Bagaimana sih bentuk header dua kolom tersebut...kira-kira seperti sobat lihat di bawah ini....yang sebelah kiri merupakan header utama yang di potong sedangkan sebelah kanan header hasil potongan...ada keuntungan yang bisa kita ambil dengan adanya dua klom header ini mungkin kita bisa meletakan tulisan,gambar,maupun kode script di samping judul blog kita..


Di dalam postingan ini header yang akan di modifikasi adalah untuk blog yang memakai templete baru jika templete sobat memakai templete lama silahkan baca artikel selanjut nya di sini.

Jika sobat berminat untuk membelah header cara nya ga terlalu ribet cukup bawa pisau dapur atau celurit terus di belah bereskan..!!! he he sorry bercanda juragan....

Ok..!!! kita langsung aja mengikutin tahapan-tahapan nya...

1. Tahap PERTAMA

  • seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN
  • Anda klik Edit HTML
  • sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
  • Jangan lupa di centang
  • Kalau sudah kita mulai mengobok-ngobok kode html nya
CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard) fokus pencarian pada huruf bercetak tebal




.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}

anda hapus kode di atas dan ganti (replace) dengan kode di bawah ini...



.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}
#header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px;}


2.Tahap KEDUA

Cari kode di bawah ini


<div class='region-inner header-inner'>

Terus anda tambahkan dengan kode di bawah in...


<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Hasil nya kayak di bawah ini..


<div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

catatan :
  • Untuk yang bercetak tebal merupakan kode yang di tambahkan tambahan 
  • Untuk yang bercetak merah angka nya bisa anda bisa ganti dengan angka 2,3,4 atau lain nya..maksud nya untuk susunan kolom kebawah. 


3. Tahap KETIGA selesai dan simpan templete


Sekarang Lihat hasil nya...langsung anda kerancangan...semoga berhasil ya....jika ada kendala silahkan tinggalkan komentar nya di bawah...
le texte existent réellement à ce lien


Lihat Selengkapnya Beri Komentar


SliDeR KonTen oToMaTis UnTuK BloG MenGguNaKan JQuerY




Berikut ini adalah sekuel dari bagian slider isi 3... untuk anda yang benar-benar seperti sliderkonten, saya memberikan Slider konten awesome otomatis untuk jQuery menggunakanBlogger Bagian 3 ... lebih bergaya, lebih indah,lebih menarik ..
Saya harap Anda menyukainya ...
Berikut ini adalah tampilannya

Feature Konten Slider


Langkah 1: Menerapkan Style
Login ke Dashboard Blogger dan arahkan ke Layout> Edit HTML
Jangan klik kotak centang yang mengatakan 'Expand Template Widget'
menemukan ini

]]></b:skin>
Kemudian masukkan script di depannya
/* START
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.com

http://css-tricks.com/889-creating-a-slick-auto-playing-featured-content-slider/

--------------------------------------------------------------------
Featured Content Slider
*/
#slider-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px;font-size: 10px; background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-bg.png) top center; }
.slider-wrap{ font-family: Arial, Helvetica, sans-serif; width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel    { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav{ display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row    { margin: -46px 0 0 62px; }
#movers-row div    { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data{ background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-transpBlack.png); padding: 10px; height: 40px; margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link    { display: block; width: 62px; margin-top: -10px; position: relative; padding-top: 10px; z-index: 9999; }
.active-thumb { background: transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-icon-uparrowsmallwhite.png) top center no-repeat; }
/* END
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.com
--------------------------------------------------------------------
Featured Content Slider
*/


Langkah 2: TerapkanJavascript
Temukan ini:

</body>

Kemudian masukkan script di depannya


<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/FeaturedContentSlider.pack.js"></script>
 <script type="text/javascript">
 var theInt = null;
 var $crosslink, $navthumb;
 var curclicked = 0;
 theInterval = function(cur){
 clearInterval(theInt);
 if( typeof cur != 'undefined' )
 curclicked = cur;
 $crosslink.removeClass("active-thumb");
 $navthumb.eq(curclicked).parent().addClass("active-thumb");
 $(".stripNav ul li a").eq(curclicked).trigger('click');
 theInt = setInterval(function(){
 $crosslink.removeClass("active-thumb");
 $navthumb.eq(curclicked).parent().addClass("active-thumb");
 $(".stripNav ul li a").eq(curclicked).trigger('click');
 curclicked++;
 if( 6 == curclicked )
 curclicked = 0;
 }, 3000);
 };
 $(function(){
 $("#main-photo-slider").codaSlider();
 $navthumb = $(".nav-thumb");
 $crosslink = $(".cross-link");
 $navthumb
 .click(function() {
 var $this = $(this);
 theInterval($this.parent().attr('href').slice(1) - 1);
 return false;
 });
 theInterval();
 });
 </script>


Langkah 3: Terapkan Gadget
Desain -> Klik "Tambah Gadget" -> HTML /JavaScript tipe.


<div id="slider-wrap">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-FeaturedContentSlider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6; //recommended
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
if you have any questions please leave a comment….thx u

le texte existent réellement à ce lien


Lihat Selengkapnya Beri Komentar


Membuat Breadcrumbs di Blogger




Membuat Breadcrumbs di Blogger
Breadcrumbs adalah menu navigasi yang digunakan dalam user interface. Yang memungkinkan pengunjung mengetahui lokasi dalam dokumen blog. Membuat Breadcrumbs ini juga bagus untuk SEO 'katanya!', baik langsung saja cara membuatnya di template blogger anda.
  1. Sebelum memulai pastikan anda sudah Login di Blogger.com, jika sudah klik Rancangan
  2. Klik Edit Html
  3. Centeng Expand Widget Template 
  4. Cari kode ]]></b:skin> caranya tekan Ctrl+F, kalau sudah ketemu copy kode dibawah ini, paste diatas ]]></b:skin> (anda bisa merubah kode CSS nya dengan kehendak anda sendiri)
    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef;
    }
  5. Selanjunya cari <div class='post hentry'> copy kode di bawah ini taruh di bawahnya <div class='post hentry'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
    <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
    <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
    </b:loop>
    </b:if> &#187; <data:post.title/>
    </div>
    </b:if>
    </b:if>
  6. Setelah itu klik Simpan Template. dan lihat hasilnya pada situs anda,
le texte existent réellement à ce lien


Lihat Selengkapnya Beri Komentar


Tips Agar Loading Blog ringan




Wah berat bener nih blog.. saya jadi bosen nungguinnya mana billingnya jalan terus lagi kan saya bisa "tekor" nih!! ga' mw kn jadi salah satu orang ini.. nungguin blognya buka dengan sempurna lamanya minta ampun ya cape'deh.. kata orang klo blog kita berat itu bisa bikin pengunjung jadi bosen dan ga' mau datang lagi ke blog kita makanya jaga deh supaya blog kamu tidak berat, klo itu terjadi maka suatu hal yang buruk akan menimpamu... saya akan berikan tips suapaya blog kita tidak berat alias lamban.. 6 langkah yang harus dilakukan ialah :

Cek dulu seberapa berat Blog kmu dengan Website speed Test. Disana kmu masukkan Alamat blog/URL kamu ke kotak yang sudah ada disana.. klo sudah klik Check! dan lihat seberapa berat blog kmu. Klo hal yang buruk itu terjadi pada blog kmu maka 6 langkah harus dilakukan dengan seksama :
  1. Kalau blogmu diisi dengan video, atau musik maka anda harus menggunakan file yang berukuran kecil seperti (MIDI atau WAV). Kenapa Video, serta musik biasanya menggunakan size yang besar sehingga dapat memberatkan blog mu.
  2. Foto dan Gambar yang berukuran besar akan dapat meyebabkan blog kita berat juga lo, maka pakai lah format yang berukuran kecil GIF atau JPG atau editlah foto atau gambar mu dengan PICASA.
  3. Perkecil penggunaan Java Script pada blog kamu.
  4. Bersihkanlah HTML kodemu dengan hal yang tidak berguna yang memungkinkan dapat memberatkan blog.
  5. Pergunakanlah Design Template yang simple, penggunaan design yang simple ini dapat mempercepat loading pada blogmu.
  6. Cek kembali link-link yang kmugunakan sebagai BlogRoll.. mungkin saja Link yang lama sudah tidak berfungsi lagi dengan kata lain saat diklik.. maka akan muncul pesan "Maaf Blog Anda Tuju Sudah Tidak Aktif Lagi". Bisa saja kan seperti itu, karena segala kemungkinan itu bisa terjadi.
Itu lah sedikit ilmu dari saya mungkin berguna.. karena kecepatan loading pada blog atau website itu sangat berguna karena dapat menghemat pulsa dan uang anda...
le texte existent réellement à ce lien


Lihat Selengkapnya Beri Komentar


Mengganti tulisan older dan newer Post




Seperti di lihat pada gambar ini.. disana terdapat tulisan Older, Home, dan Newer. Tulisan itu dapat kita ganti dengan kata lainya, atau dengan gambar/icon. untk memulainya kita harus bisa mengubah-ubah sedikit html yang ada pada template blog kita,jangan kawatir karena saya akan menuntun anda.



langkah yang harus dijalani
1. Masuk ke akun blogger anda

2. Cari kode ini:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>

3. Ganti kode tersebut menjadi seperti ini:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> <img src="Image URL" /></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'> <img src="Image URL" /></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <img src="Image URL" /></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <img src="Image URL" /></a>
</b:if>
</b:if>

</div>

Keterangan:

1. Disana terdapat tulisan yang berwarna Hijau Ganti lah kode tersebut menjadi <img src="Image URL" /> nah ganti Image Url dengan lokasi/Url gambar/icon yang anda miliki.

2. Anda bisa mencari Icon-Icon tersebut di- Icon Archive

3. Selamat mencoba
le texte existent réellement à ce lien


Lihat Selengkapnya Beri Komentar


Menghilangkan Halaman Posting Di Homepage



 Posting ini merupakan sesi dari “Tanya saja!” di kolom tutorial.
Penanya :
kang punten bade tumaros. Gmn caranya supaya ketika orang masuk ke blog kita, yamg pertama dilihat selalu halaman awal/home (biasanya di posting terakhir, kayak di situs2 .com, .net atau apapun juga.
Hatur nuhun
Kang Rohman :
Saya kurang ngerti pertanyaannya. apa yang dimaksud adalah intro, kaya gambar2 flash gitu?
Penanya :
kayaknya bukan intro. Maksud saya ketika pengunjung masuk ke blog saya maka yang pertama kali kebuka itu selalu halaman awal (home), karena setahu saya biasanya yang pertama kali kebuka adalah postingan terakhir. hatur nuhun
Dari keterangan yang kedua, diketahui bahwa yang diinginkan adalah agar halaman posting tidak muncul dihalaman depan alias homepage. Apakah ini bisa diterapkan pada template blogger? jawabannya adalah bisa. Anda hanya cukup menambahkan kode if condition saja.
Teknik yang bisa digunakan bisa dengan if condition pada kode CSS atau bisa juga langsung pada kode HTML.  Sebagai contoh, kang Rohman akan menggunakan teknik if condition pada kode HTML.
Kode widget post, didalam template blogger umumnya adalah seperti berikut :
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Agar widget post atau halaman posting tidak muncul dihalaman depan aka homepage, anda cukup menambahkan kode seperti ini ( warna hijau )
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:section class='main' id='main' showaddelement='no'> 
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</b:if>
Kode yang berwarna hijau adalah agar widget post tidak muncul pada halaman depan saja, namun akan muncul pada halaman single post, kategori, pencarian, arsip dll. Intinya kode tersebut hanya menghilangkan dari halaman depan saja.
Selain kode tersebut, anda juga bisa menggunakan kode berikut (warna hijau) :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:section class='main' id='main' showaddelement='no'> 
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</b:if>

Kalau yang ini lebih sedikit ekstrim. Widget post atau halaman posting hanya akan muncul pada halaman single post saja ( halaman apabila posting tersebut dibaca secara keseluruhan atau hanya pada URL posting itu saja ). Jadi, pada halaman lain seperti halaman kategori, halaman arsip, halaman pencarian dan lain-lain tidak akan muncul.
Nah, mau pilih yang mana? silahkan sesuaikan dengan keinginan atau kebutuhan.

Trik menghilangkan Widget post di homepage

Berikut tutorial lengkap bagaimana implementasi penempatan kode diatas :
  1. Silahkan login ke blogger dengan ID anda.
  2. Klik Rancangan  
  3. Klik menu Edit HTML.
  4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
  5. Carilah kode berikut pada template anda : 
    <b:section class='main' id='main' showaddelement='no'> 
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
  6. Gantilah kode tersebut dengan kode berikut ini : 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:section class='main' id='main' showaddelement='no'> 
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</b:if>
  7. Klik tombol SIMPAN TEMPLATE.
  8. Selesai.
Satu yang harus anda ingat yaitu pada halaman depan alias homepage, anda harus memasang link ke postingan yang dimaksud, bisa pada menu navigasi, link disidebar atau dimanapun agar pengunjung bisa mengakses isi postingan anda.
Trik diatas, kang Rohman rasa cocoknya adalah untuk blog yang statis seperti blog jualan atau toko online yang jarang melakukan update post, dan tentunya kurang cocok untuk format blog yang postingannya sering diupdate.
Ada masukan dari anda?
le texte existent réellement à ce lien


Lihat Selengkapnya Beri Komentar


Menampilkan hanya judul blog



Fasilitas ‘Tanya Saja!” kolom tutorial rupanya banyak mendapatkan perhatian dari para pengunjung. Puluhan pertanyaan telah masuk, sebagian sudah dijawab secara langsung dan ada juga yang melalui postingan untuk pertanyaan yang memang memerlukan jawaban yang lebih rumit. Yang pertanyaannya belum dijawab, mohon sabar yah, mudah-mudahan nanti bisa terjawab Happy
Pertanyaan :
Kang Rohman... sebelumnya saya minta maaf kl email saya menggangu, saya ingin tanya kang, gimana caranya menampilkan postingan yg hanya tampil judul postingannya saja
Jawaban : Memang, beberapa blogger memilih blognya hanya menampilkan judul posting saja pada halaman depan atau home page. Mungkin dasar pemikiran dari pemilik blog itu sendiri adalah menampilkan hanya judul posting saja dapat menghemat ruang sehingga jumlah post yang ditampilkan bisa lebih banyak pada halaman depan atau beranda. alasan pendukung lainnya mungkin karena judul posting sangat mewakili isi dari posting itu sendiri sehingga dengan menampilkan judul posting di halaman depan lebih memungkinkan artikelnya akan lebih banyak di baca oleh para pengunjungnya. Berikut contoh blog yang hanya menampilkan judul post nya saja :
judul posting
Agar pada halaman depan hanya menampilkan judul posting saja, berikut langkah-langkahnya :
  • Silahkan login ke blogger dengan ID anda.
  • Klik Rancangan   rancangan
  • Klik menu Edit HTML. edit html
  • Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap. backup template
  • Carilah kode ]]></b:skin>
  • Copy kode berikut, lalu paste di bawah kode ]]></b:skin> 
    <style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     .post-body{display:none;}
     </b:if>
     </b:if>
     </style>
  • Klik tombol SIMPAN TEMPLATE.
  • Selesai. Silahkan lihat hasilnya.
Mudah bukan? namun, dengan memasang kode diatas masih menyisakan beberapa elemen seperti tanggal posting, komentar dan yang lainnya. Jika anda ingin menghilangkan semuanya dan yang tersisa hanya judul post nya saja, mungkin anda bisa menggunakan kode berikut :
<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     .post-body, .post-footer, .jump-link, 
     .post-timestamp, .reaction-buttons, 
     .star-ratings, .post-backlinks, 
     .post-icons, .date-header{display:none;}
     </b:if>
     </b:if>
     </style>
Jika ternyata masih ada elemen tersisa selain judul post, mungkin kode template anda tidak mengikuti standar template blogger. Bagaimana solusinya? anda harus mengenali struktur template anda.
Bagi anda pengguna browser internet firefox, kang Rohman punya tips mudah mengenali struktur template anda yaitu dengan menginstall add-ons Web Developer yang bisa anda download di add-ons for firefox.
Sekarang kang Rohman anggap anda telah menginstall add-ons web developer pada firefox yang anda gunakan. Silahkan buka alamat blog anda ( tentunya yang akan di edit sesuai artikel diatas ). Klik menu Information, kemudian pilih Display Div Order.
div order
Maka secara otomatis akan ditampilkan struktur div dari template anda. Contoh gambar :
struktur div
Dari gambar tersebut terlihat bahwa tanggal posting serta komentar disimpan dalam elemen div :
.databarleft
.datebarright

Sehingga kode yang digunakan menjadi seperti ini :
<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
     .post-body, .databarleft, .datebarright{display:none;}
     </b:if>
     </b:if>
     </style>
Semoga bisa difahami.
Update : kode telah di sempurnakan agar tidak konflik dengan static page / static post
 
le texte existent réellement à ce lien


Lihat Selengkapnya Beri Komentar


Modif Kotak Komentar Blogmu .......




Hiks... setelah membaca beberapa pesan yang masuk ke kotak shoutbox, kotak komentar serta kiriman email, rupanya banyak sekali yang menyukai tampilan dari kotak komentar yang kang rohman pakai yaitu kotak komentar yang seperti ini :

komentar
Seperti biasanya, kalau banyak yang suka pasti kang rohman di berondong oleh permintaan agar di buatkan tutorial cara membuat kotak komentar yang seperti gambar di atas. Nah, untuk memenuhi hasrat beliau-beliau ini maka kang rohman menyempatkan diri untuk membuatkan tentang bagaimana membuat kotak komentar ini.
Perlu di ketahui sebelumnya bahwa setiap kode template antara yang satu dengan yang lain bisa berbeda bisa juga sama, jika tutorial ini tidak sama dengan kode yang ada pada template anda, maka maaf saja berarti anda kurang beruntung. Sebagai contoh, kang rohman memakai kode template Minima.
Agar tidak terlalu ngalor ngidul karena sekarang kang rohman punya penyakit males ngetik banyak-banyak, maka langsung saja kepada langkah bagaimana cara memodifikasi kotak komentar ala blog kang rohman.

  1. Login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
  5. Beri tanda centang/tik pada kotak kecil di samping tulisan Expan template Widget.

    expand widget template
  6. Tunggu beberapa saat ketika proses sedang berlangsung.
  7. Cari kode pada bagian CSS yang seperti ini :

    #comments h4 {
      margin:1em 0;
      font-weight: bold;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color: $sidebarcolor;
      }
    #comments-block {
      margin:1em 0 1.5em;
      line-height:1.6em;
      }
    #comments-block .comment-author {
      margin:.5em 0;
      }
    #comments-block .comment-body {
      margin:.25em 0 0;
      }
    #comments-block .comment-footer {
      margin:-.25em 0 2em;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.1em;
      }
    #comments-block .comment-body p {
      margin:0 0 .75em;
      }
    .deleted-comment {
      font-style:italic;
      color:gray;
      }


  8. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :

    #comments h4 {
      margin:0;
      font-weight: bold;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color: #000;
      }
    #bg_commentblock {
        width: 548px;
        background: #ffffff;
        float: left;
        padding:20px;
        margin:0 0 10px 0;
        border:1px solid #C0C0C0;
        }
    #commentblock {
        width: 510px;
        background: #E8E8E8;
        text-align:left;
        padding: 20px 20px 10px 20px;
        margin: 10px 0px 0px 0px;
        border-top: 2px solid #333333;
        border-bottom: 1px solid #333333;
        }
    #commentblock ol {
        list-style-type: square;
        margin: 0px 0px 0px 10px;
        padding: 0px 0px 10px 0px;
        }
    .commentdate {
        font-size: 12px;
        padding-left: 0px;
        }
    #commentlist li p {
        margin-bottom: 8px;
        line-height: 20px;
        padding: 0px;
        }
    .commentname {
        color: #333333;
        margin: 0px;
        padding: 5px 5px 5px 0px;
        }
    .commentinfo{
        clear: both;
        }
    .commenttext {
        clear: both;
        margin: 3px 0px 10px 0px;
        padding: 20px 10px 5px 10px;
        width: 490px;
        background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM-qrJHuxbDM_yC_DwuWnouFWwz5DmaNz2xnQ92SdL-GWj8eZTM4cbIKKYJ6i9za9DQXISBC9MKBf1DYDVvx3D_Kg5fg9WYxth_aDW60MEEtEVYQ9JwZbdxtw8yogYf9X4IJ2jfVhGsrPH/s320-r/comment.gif) no-repeat top left;
        }
    .commenttext-admin {
        clear: both;
        margin: 3px 0px 10px 0px;
        padding: 20px 10px 5px 10px;
        width: 490px;
        background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM-qrJHuxbDM_yC_DwuWnouFWwz5DmaNz2xnQ92SdL-GWj8eZTM4cbIKKYJ6i9za9DQXISBC9MKBf1DYDVvx3D_Kg5fg9WYxth_aDW60MEEtEVYQ9JwZbdxtw8yogYf9X4IJ2jfVhGsrPH/s320-r/comment.gif) no-repeat top left;
        }


  9. Lihat Ke bagian bawah, dan cari kode yang seperti ini :

    <b:includable id='comments' var='post'> 
    <div class='comments' id='comments'> 
    <a name='comments'/> 
    <b:if cond='data:post.allowComments'> 
    <h4> 
    <b:if cond='data:post.numComments == 1'> 
              1<data:commentLabel/>:
            <b:else/>
              <data:post.numComments/> <data:commentLabelPlural/>:
            </b:if>
          </h4>
          <b:if cond='data:post.commentPagingRequired'>
            <span class='paging-control-container'>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
              &#160;
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
              &#160;
              <data:post.commentRangeText/>
              &#160;
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
              &#160;
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
            </span>
          </b:if>
          <dl id='comments-block'>
            <b:loop values='data:post.comments' var='comment'>
              <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
                <a expr:name='data:comment.anchorName'/>
                <b:if cond='data:comment.authorUrl'>
                  <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
                <b:else/>
                  <data:comment.author/>
                </b:if>
                <data:commentPostedByMsg/>
              </dt>
              <dd class='comment-body'>
                <b:if cond='data:comment.isDeleted'>
                  <span class='deleted-comment'><data:comment.body/></span>
                <b:else/>
                  <p><data:comment.body/></p>
                </b:if>
              </dd>
              <dd class='comment-footer'>
                <span class='comment-timestamp'>
                  <a expr:href='data:comment.url' title='comment permalink'>
                    <data:comment.timestamp/>
                  </a>
                  <b:include data='comment' name='commentDeleteIcon'/>
                </span>
              </dd>
            </b:loop>
          </dl>
          <b:if cond='data:post.commentPagingRequired'>
            <span class='paging-control-container'>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                <data:post.oldestLinkText/>
              </a>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                <data:post.olderLinkText/>
              </a>
              &#160;
              <data:post.commentRangeText/>
              &#160;
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                <data:post.newerLinkText/>
              </a>
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                <data:post.newestLinkText/>
              </a>
            </span>
          </b:if>
          <p class='comment-footer'>
            <b:if cond='data:post.embedCommentForm'>
              <b:include data='post' name='comment-form'/>
            <b:else/>
              <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
              </b:if>
            </b:if>
          </p>
        </b:if>

  10. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :

    <b:includable id='comments' var='post'>
      <div class='comments' id='comments'>
        <a name='comments'/>
        <b:if cond='data:post.allowComments'>
    <div id='bg_commentblock'>
    <h4>
    Komentar :
       </h4>
       <div id='commentblock'><!--commentblock-->
    <strong>ada</strong> <b:if cond='data:post.numComments == 1'>1
            <b:else/>
               <strong><data:post.numComments/> <data:commentLabelPlural/> ke &#8220;<data:post.title/>&#8221;</strong>
            </b:if>
          <dl class='commentlist'>
            <b:loop values='data:post.comments' var='comment'>
              <span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
                <a expr:name='data:comment.anchorName'/>
                <b:if cond='data:comment.authorUrl'>
                  <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
                <b:else/>
                  <data:comment.author/>
                </b:if>
                <data:commentPostedByMsg/>
              </dt>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
                <span class='comment-timestamp'>
                  <a expr:href='data:comment.url' title='comment permalink'>
                    <data:comment.timestamp/>
                  </a>
                  <b:include data='comment' name='commentDeleteIcon'/>
                </span>
              </dd></span>
              <dd class='commenttext'>
                <b:if cond='data:comment.isDeleted'>
                  <span class='deleted-comment'><data:comment.body/></span>
                <b:else/>
                  <p><data:comment.body/></p>
                </b:if>
              </dd>
            </b:loop>
          </dl>
          <b:if cond='data:post.commentPagingRequired'>
            <span class='paging-control-container'>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                <data:post.oldestLinkText/>
              </a>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                <data:post.olderLinkText/>
              </a>
              &#160;
              <data:post.commentRangeText/>
              &#160;
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                <data:post.newerLinkText/>
              </a>
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                <data:post.newestLinkText/>
              </a>
            </span>
          </b:if>
          <p class='comment-footer'>
    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>
    </p>
        </div><!--end commentblock-->
    </div>
        </b:if>


  11. Klik tombol Simpan Template.
  12. Selesai. Silahkan lihat hasilnya.
      
Kode-kode diatas tentunya tidaklah mutlak harus seperti itu, jika anda sedikit familiar dengan css, maka anda bisa berkreasi lebih. Terutama pada bagian lebar kotak komentar, anda harus menyesuaikan dengan lebar kotak komentar template anda. Sedikit petunjuk, untuk mengubah lebar kotak koemntar di atas, anda tinggal mengganti nilai dari width nya, contoh : width: 548px; di ubah jadi width: 500px; atau berapa saja sesuai dengan template anda.
Nah itulah tutorial singkat yang anda tunggu-tunggu selama berbulan-bulan, semoga dapat mengobati rasa kesal yang selama ini mengganjal di hati anda.

Selamat mencoba.
le texte existent réellement à ce lien


Lihat Selengkapnya Beri Komentar


memasang atau upload template blogger



Jika Anda sudah mendownload template, maka muncul pertanyaan selanjutnya, "Bagaimana memasang template tersebut di blog?" Caranya sangat mudah.


http://www.poweredtemplates.com/images/img/brochure_template.jpg


Langkah selanjutnya adalah mengunggah template yang telah anda buat ke blogger.com
1. Buka www.blogger.com
2. Login isikan e-mail dan password seperti yang kemarin telah anda buat.
3. Anda akan masuk ke Dasbor blog Anda
4. Klik Tata Letak (sekarang, Design/Rancangan)
5. Klik Edit HTML
6. Klik Browse
7. Cari template anda
8. Klik file template tersebut
9. Kemudian Klik Unggah
10. Tunggu beberapa saat untuk proses
Buka blog anda dan perhatikan perubahannya.

Keterangan: Banyak template yang masih dalam format .rar
Jika langsung di unggah tentu tak bisa, sebelum unggah template, extract dahulu file download anda........
Sumber : Masdoyok


Lihat Selengkapnya Beri Komentar


kode kode template blog



Kadang kita kalau ingin mengedit template mungkin ingin menyesuaikan dengan keinginan kita , dan pada kali ini saya sedikit share tentang beberapa kode yang semoga bermanfaat bagi anda :

Link Halaman utama blog ( home page url ) kodenya : 
data:blog.homepageUrl

Judul blog ( blog title  ) :
data:blog.title

Deskripsi blog
data:description


Tanggal posting ( Berlaku di bagian halaman posting )
data:post.dateHeader

Jam Posting
data:post.timestamp

Url Artikel
data:post.url

Judul Halaman posting
data:blog.pageTitle

Url Artikel sebelumnya
data:newerPageUrl

Judul Artikel Sebelumnya
data:newerPageTitle

Url Artikel selanjutnya
data:olderPageUrl

Judul artikel selanjutnya
data:olderPageTitle

Label Artikel blog
data:post.labels

Nama Penulis blog
data:post.author

Dan masih banyak lagi kode kode yang ada di bagian template anda , sebagian kode diatas hanya bisa diterapkan di dalam template , namun ada juga yang bisa diterapkan di bagaian halaman posting blog

Demikian artikel singkat saya , semoga bermanfaat bagi anda dalam pengeditan template anda 
Salam Blogger


Lihat Selengkapnya Beri Komentar


 

Dibutuhkan Bulan ini :

Paling Dibutuhkan :

Dibutuhkan Minggu Ini

© 2011 tutorial blogger indonesia PublisedSeo Template Blogger Converted Template by Hack Tutors.info