2 Desain Daftar Isi Untuk Blog Bernuansa Hitam

2 Desain Daftar Isi Untuk Blog Bernuansa Hitam - Melakukan penjelajahan untuk mengetahui serta mencari semua informasi pada sebuah blog, hanya akan lebih mudah jika blog tersebut telah membuat rangkuman keseluruhan artikelnya dengan tampilan daftar isi. Biasanya pemilik blog menuliskan text dengan link "Daftar Isi, Sitemap Blog" dan lain sebagainya yang ditampilkan dalam bentuk URL pada menu navigasi, tujuannya hanya untuk mempermudah pengunjung dalam mencari dan mengetahui apa saja informasi atau artikel yang mengisi blog tersebut sebagai tempat untuk berbagi dan bertanya.

Bahkan demi memberikan kepuasan pengunjung, banyak pemilik blog yang selalu berupaya mendesain tampilan blog mereka agar terlihat menarik, seperti menyisipkan beberapa widget pada sidebar page dengan Membuat Menu Blogger Dengan Target Gambar, atau mengubah tampilan casing blog dengan balutan warna border yang beragam warna. Namun tidak sedikt juga sahabat lain yang memilih untuk memodifikasi tampilan blog mereka dengan tampilan blog yang bernuansa warna hitam, dari warna cover, background body-posting yang semuanya bernuansa hitam.

2 Desain Daftar Isi kali ini akan sangat cocok untuk menghias tampilan blog sahabat semua pecinta SAHABAT BLOGGER 77 yang memiliki desain blog bernuansa hitam dengan 2 desain berikut:

1. Black Red Light Theme
2. Elegan Black Color

1. Black Red Light Theme

Desain warna hitam samar, tidak terlalu pekat agar tidak membuat mata perih saat melihatnya berlama-lama. Sedangkan untuk teks judul artikel saya beri warna white-smoke dengan efek embos yang saya balut dengan background merah menggunakan elemen linear-gradient agar tampilannya terlihat seakan menyala (light) dengan kode CSS seperti ini:


.span {
  background-color:#981216;
  background:-webkit-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:-moz-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:-ms-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:-o-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);

Jika tampilan warna diatas kurang menarik, Anda bisa sesuaikan tampilan background warnanya disni - Mengenal Lebih Jauh Tentang CSS3 Linear Gradient. Untuk desain menu seperti tanggal terbit, jumlah komentar dan link read more (Selengkapnya..) saya balut dengan efek cembung bulat dengan model gulungan kertas dengan elemen seperti ini:


.span {
  background-image:-webkit-linear-gradient(#333, #444, #333, #222);
  background-image:-moz-linear-gradient(#333, #444, #333, #222);
  background-image:-ms-linear-gradient(#333, #444, #333, #222);
  background-image:-o-linear-gradient(#333, #444, #333, #222);
  background-image:linear-gradient(#333, #444, #333, #222);

Hasilnya:



DEMO SHOW        GET IN CODE




2. Elegan Black Color

Tidak jauh berbeda dengan tampilan Black Red Light Theme pada desain pertama, namun untuk desain daftar isi model ke-2 kali ini tampilannya sekilas berbentuk Klise Roll Film. Sedangkan untuk keseluruhan tampilan menggunakan background yang sama warna hitam, namun untuk thumbanail gambar posting saya bentuk dengan border-radius untuk membuat bentuk lingkaran.

Dan yang terpenting adalah, 2 Desain Daftar Isi Blog ini sudah saya lengkapi dengan link pagination-page, sehingga akan mempermudah pengunjung dalam menavigasi halaman sebelumnya dan berikutnya dengan efek focus pada halaman yang telah dikunjungi dengan warna aktif seperti ini:

DEMO SHOW        GET IN CODE

Diary Notes Theme Sitemap Responsive

Diary Notes Theme Sitemap Responsive - Mengubah tampilan daftar artikel pada halaman beranda/home mungkin sangat jarang yang melakukannya, lebih memilih menggunakan apa yang sebelumnya sudah tersedia saat template diadopsi ke blog (Bawaan Template). Tutorial kali ini hanya merupakan sebuah pilihan buat sahabat semua pecinta blogger yang barangkali saat ini sedang berusaha melakukan perbaikan pada tampilan blog, mempercantik tampilan blog serta mendesain dan memodifikasi ulang tampilan dibeberapa halaman blog terutama pada halaman beranda. Karena untuk HOME PAGE, disanalah tersusun daftar postingan terbaru ditampilkan saat Anda telah mempublikasikan sebuah artikel.

Selain Daftar Isi yang pada umumnya Anda letakkan pada formulir laman posting, pada halaman Home/Beranda juga terdapat daftar postingan yang semuanya itu dapat kita ubah bentuk tampilannya sekeren mungkin.

Tidak jauh berbeda dengan Daftar Isi Responsive Model Tema Facebook pada postingan sebelumnya, namun untuk Diary Notes Theme Sitemap Responsive kali ini akan kita tempatkan pada halaman Home untuk menggantikan daftar artikel yang Anda gunakan saat ini.

Agar memudahkan pekerjaan sahabat semua, saya sudah memodifikasi semua tampilan sekeren mungkin, seperti melengkapinya dengan ringkasan posting setelah judul, memberi tanggal terbit dan jumlah komentar dan Anda juga bisa memilih artikel yang tampil berdasarkan label tertentu dengan format pengaturan JavaScript dengan mengganti nilai-nilai pada masing-masing elemen data.

DESAIN TAMPILAN
Sebelum Anda akan meng-Copy kode script dibawah ini, terlebih dahulu silahkan sesuaikan desain tampilan sesuai dengan selera Anda sendiri, caranya cukup ganti nilai yang ada pada elemen data script seperti ini:

<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://sahabatblogger77.blogspot.com",
    postPerPage    = 10,
    numChars       = 370,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC1CyBt3w2rWbGyPqHjlXcC6tNLJLlq6xsDWZEcobfLARmowJXOEVHy4CdfUxzq15tNFz_-pZL7bmE_6Zm41Q-RwpNkpsi2HXIJFthfXX5P886YH6vmXDpknGOZTJIZw7tk3x0kjD0xbw/s1600/sb77-image6.jpg";
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/diary-notes-theme-sitemap.js"></script>

KETERANGAN DATA ELEMEN

DATA	NILAI ELEMENT	KETERANGAN FUNGSI
showPostDate	true | false	Nilai true untuk menampilkan bulan terbit. Ganti nilainya menjadi false jika tidak ingin tampil
showComments	true | false	true untuk menampilkan jumlah komentar false untuk tidak menampilkannya
idMode	true | false	Sistem penggunaan bahasa pada tanggal. true - Tanggal terbit dengan bahasa Indonesia false - Tanggal terbit dengan bahasa Inggris
sortByLabel	true | false	Untuk menampilkan posting dengan label tertentu
labelSorter	"jQuery","nama label.."	Tentukan nama label, jika nilai data pada sortByLabel bernilai true
totalPostLabel	"Jumlah posting"	Ganti teks berikut sesuai selera Anda
jumpPageLabel	"Halaman"	Ganti teks berikut sesuai selera Anda (Teks Dibawah Navigasi)
commentsLabel	"Komentar"	Untuk menentukan jumlah komentar, seperti: 10,20 Komentar
rmoreText	"Selengkapnya"	Link untuk menuju halaman posting
prevText	"Sebelumnya""	Pagination untuk menuju halaman sebelumnya
nextText	"Berikutnya"	Pagination untuk menuju halaman selanjutnya
siteUrl	URL Link	Ganti dengan URL Blog Anda
postsPerPage	10,15	Untuk menentukan jumlah posting yang tampil pada satu halaman penuh
numChars	100,300	Untuk menentukan jumlah karakter yang tampil pada ringkasan posting
imgBlank	URL-Gambar	Digunakan untuk menggantikan jika artikel tidak memiliki gambar

TAHAP PENERAPAN KE BLOG
Untuk menempatkan tampilan widget ini ke halaman beranda, tentu saja terlebih dahulu Anda harus menghilangkan daftar artikel yang sebelumnya saat ini Anda gunakan.

INGAT: Jangan dihapus, hanya menghilangkan isi tampilan agar tidak terlihat saat halaman Home terbuka. Sehingga pada opsi tata-letak halaman home akan kosong (No Posting), dan sudah berubah menjadi formulir kosong untuk menambahkan widget-gadget.

Setelah halaman home dikosongkan, selanjutnya copy kode script diatas, lalu letakkan pada formulir kosong tadi, namun jangan lupa untuk sebelumnya meletakkan CSS berikut pada Template Anda untuk mendukung performa tampilan.

Cara Mengatur Halaman Blog Agar Responsive

Cara Mengatur Halaman Blog Agar Responsive - Responsive atau "RESPON" berarti menerima dan dapat menyesuaikan diri terhadap hal-hal yang diterima serta dapat mengatur letaknya sesuai dengan dimana halaman tersebut terbuka sebagai tempat. Responsive bisa juga diartikan sebagai fleksibel area halaman blog, jika halaman dibuka pada resolusi layar yang kecil, maka tampilan halaman blog akan mengikuti lebar layar yang Anda gunakan saat membuka halaman blog saat ini. Sebagai contoh coba Anda minimalkan ukuran layar monitor Anda saat ini, maka secara otomatis halaman akan ikut menyusut mengikuti resolusi layar, hal inilah yang disebut dengan Responsive Page.

Bukan hanya itu, bahkan sebuah website dituntut harus mampu malakukan pendekatan untuk mengatur hasil tampilan halaman yang menunjukkan bahwa desain dan perkembangan dapat merepon dan tanggap pada perilaku pengguna berdasarkan ukuran, platform dan orientasi layar secara otomatis. Dengan kata lain sebuah website harus memiliki sistem teknologi otomatis untuk dapat merespon preferensi pengguna berdasarkan resolusi layar yang digunakan seperti Komputer PC, Laptop, Netbook, Tablet, SmartPhone dan Mobile Phone.

Top Artikel - CSS Flower Navigasi Efek Rotasi

Tidak semua ukuran resolusi layar pada perangkat yang Anda gunakan sama, semua memiliki lebar dan tinggi yang berbeda-beda, untuk itu kita perlu mengatur halaman blog agar responsive, sehingga letak dan layout halaman tetap dalam tampilan yang rapi dimanapun halaman tersebut terbuka dengan menambahkan kode @media-screen, contoh seperti ini:

//halaman hanya akan tampil dengan lebar maksimal 800 piksel
@media only screen and (max-width:800px) {

//pengaturan halaman full (1, 2 atau 3 kolom)
#outer-wrapper {width:750px; margin:0 auto;}

//halaman posting (jika pada mobile phone akan tampil individu)
#main-wrapper {width:750px;}
//layout sidebar
#sidebar-wrapper {width:750px;}
//layout kolom footer
#footer {width:750px;}
}

Dengan pengaturan @media-layout diatas, maka jika halaman blog terbuka pada resolusi layar yang kurang dari 800px, halaman akan secara otomatis berubah tampilan menjadi 1 kolom full, contohnya pada layar tablet atau mobile phone yang memiliki ukuran layar yang cukup kecil, sehingga tampilan halaman akan menempatkan kolom sidebar dibawah setelah halaman posting secara sejajar dalam 1 kolom.


Berikut Cara Mengatur Halaman Blog Agar Responsive
1. Penempatan Kode
1.1. Tag Meta Responsive
Temukan kode <head> pada Template Anda, lalu letakkan kode ini dibawahnya:

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

1.2. CSS Lay Out Media
Kemudian letakkan kode berikut pada HTML Template Anda sesuai elemen id pada area masing-masing untuk mengatur lebar tampilan halaman yang responsive seperti ini:

<style type='text/css'>
@media only screen and (min-width:768px) and (max-width:999px){
   #outer-wrapper{width:754px}
   #main-wrapper{width:60%}
   #sidebar-wrapper{width:40%}
   #headnya{max-width:260px;min-width:250px}
   #head-ads .widget{margin:15px 0}
   #header h1,#header p{padding:15px 0 0;font-size:240%}
   #header .description{padding:0 0 10px}
   //tambahkan elemen id lainnya disini...
}

@media only screen and (max-width:767px){
   #outer-wrapper{width:440px}
   #sidebar-wrapper,#main-wrapper,#isifooternya{width:100%}
   #isifooternya .footer-wrap{width:100%}
   #nav{...}
   #search-result-container{width:100%}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #outer-wrapper{width:310px}
   #header h1,#header p{font-size:230%}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (min-width:768px) and (max-width:999px){
   #slides ul{height:200px}
   #slides h4{font-size:15px}
   #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
   .post-outer{width:100%}
   .post{width:370px}
   .blog-posts.hfeed::before{left:27px}
   .post-body p{overflow:visible}
   .post h2.post-title{height:auto;}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #slides ul{height:450px}
   .post{width:228px}
   .post h2.post-title{max-height:200px;}
   .post-body p{font-size:11px;padding:0}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #social-side2{padding:0}
   #social-side2::before{content:""}
   //tambahkan elemen id lainnya disini... 
}
</style>

2. Penyesuaian Kode
Pengaturan kode ini saya ambil langsung untuk mengatur halaman blog ini agar responsive, bahkan letak menu navigasi, kolom pencarian dan tombol share semua sudah saya atur agar responsive yang artinya elemen ID untuk halaman yang saya gunakan belum tentu sama seperti yang Anda gunakan, jadi silahkan Anda sesuaikan terlebih dahulu ID apa yang Anda gunakan untuk mengatur letak halaman pada Template Anda. Contoh seperti kode ini:

#outer-wrapper
#main-wrapper
#sidebar-wrapper

Nah jika sudah ketemu, Anda bisa tambahkan pada pengaturan media-screen pada masing-masing area pada CSS diatas, mudah bukan..!!! hehe.... semoga artikel ini dapat membantu sahabat semua pecinta SAHABAT BLOGGER 77 dalam mengatur halaman blog yang responsive dengan tampilan yang rapi. Happy blogging.

Daftar Isi Responsive Model Tema Facebook

Daftar Isi Responsive Model Tema Facebook - Selain mengisi waktu luang dengan bermain blog, sudah pasti Anda memiliki akun facebook untuk sekedar bercanda ria bersama facebooker lainnya. Seperti tutorial kali ini, saya mengambil tema Facebook untuk Membuat Daftar Isi Blog Responsive Model Tema Facebook.

Hal yang tersulit adalah mengcopy seluruh tampilan tema facebook dan memindahkannya kedalam tampilan daftar isi blog yang jelas-jelas berbeda aliran media, terlebih untuk tampilan facebook yang selalu berganti-ganti tema. Sehingga saya hanya bisa menirukan nuansa warnanya saja yang dominan berwarna biru, dan hasilnya sedikit mirip seperti ini:




DEMO SHOW



Hal yang sama seperti ► Cara Membuat Site Map Terbaru | Daftar Isi Blog sebelumnya, untuk mengatur kecepatan muat halaman (loading), saya menggunakan perintah JavaScript untuk memanggil hanya pada artikel terbaru saja yang akan ditampilkan dengan jumlah 10 posting per 1 halaman. Sedangkan penggunaan script-Jquery, saya menempatkan secara langsung dengan script variable sortir label seperti ini:

<script type='text/javascript'>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Prev",
    nextText       = "Next",
    siteUrl        = "http://URL-Anda.com",
    postPerPage    = 10,
    numChars       = 370,
</script>

PENEMPATAN DAFTAR ISI BLOG
Di bawah ini, saya sudah menyusun beberapa kode CSS untuk mendesain bentuk tampilan. Sebagai tambahan, pada kolom akhir daftar isi ini, saya menggunakan perintah navigasi halaman dengan sistem pagination number (Next - Prev). Anda bisa menempatkan kode ini secara langsung pada halaman Template.
Temukan kode ]]></b:skin> lalu letakkan kode ini tepat diatasnya:

#toc-outer {
  font:normal 11px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif;
  line-height:1.28 !important;
  color:rgb(51,51,51);
  text-align:left;
  text-shadow:none;
  background-color:white;
  overflow:hidden;
  border:2px solid #C4CDE0;
  -webkit-box-shadow:0px 1px 0px rgba(0,0,0,0.1);
  -moz-box-shadow:0px 1px 0px rgba(0,0,0,0.1);
  box-shadow:0px 1px 0px rgba(0,0,0,0.1);}

#toc-outer a {border:none;color:#e06666;}
#loadingscript {
  padding:0px 0px;
  height:37px;
  text-indent:-9999px;
  color:transparent;}

.itemposts {
  margin:0px auto 1px;
  padding:5px 5px 5px;
  height:auto;
  overflow:hidden;
  display:block;
  border-bottom:1px solid #D2D9E7;}

.itemposts h6 {
  margin:0px 0px 0px;
  font:bold 11px/16px "lucida Grande",Tahoma,Verdana,Arial,Sans-Serif;
  line-height:16px !important;
  height:16px;
  overflow:hidden;
  color:white;
  padding:5px 10px;
  background-color:#3B5998;
  border-bottom:1px solid #133783;
  text-transform:none;
  border-radius:15px;}

.itemposts h6 a {color:#fff !important;text-decoration:none;}
.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:2px 10px 2px 0px;
  padding:0px 0px;
  background-color:#fff;
  border:1px solid #999;
  -webkit-box-shadow:0px 0px 1px 1px #3B5998;
  -moz-box-shadow:0px 0px 1px 1px #3B5998;
  box-shadow: 0px 0px 1px 1px #3B5998;
  outline:none;}

.itemposts .iteminside {margin:10px 0px 0px;}
.itemposts .itemfoot {
  clear:both;
  padding:5px 10px;
  margin:10px 0px 0px;
  background-color:#EDEFF4;
  border-left:2px solid #A8B2CE;
  color:#333;
  overflow:hidden;}

.itemposts .itemfoot a.itemrmore {
  font-weight:bold;
  color:#3B5998;
  float:right;
  text-decoration:none;}

.itemposts .itemfoot a.itemrmore:hover {
  text-decoration:underline;
  border-color:transparent;}

#itempager {
  background: linear-gradient(left, transparent 0%,#6495ED 50%,transparent 100%);
  background:-webkit-linear-gradient(left, transparent 0%,#6495ED 50%,transparent 100%);
  background:-moz-linear-gradient(left, transparent 0%,#6495ED 50%,transparent 100%);
  background:-o-linear-gradient(left, transparent 0%,#6495ED 50%,transparent 100%);
  padding:15px 0px;
  border-bottom:1px solid #133783;
  color:#111;}

#pagination span.hidden {display:none;}
#pagination, #totalposts {text-align:center;}
#pagination {margin:0px 10px 10px;}
#pagination span, #pagination a {
  font-weight:bold;
  color:white;
  display:inline;
  margin:0 1px;
  padding:3px 6px;
  text-indent:0px;
  background-color:#1F4189;
  text-decoration:none;
  border:none;
  border-radius:50%;}

#pagination a:hover,
#pagination span.actual {
  background-color:red;
  color:#fff;
  border-radius:50%;}

Dimana Anda harus meletakkan script ini.?
Pada halaman posting, formulir laman atau pada widget sidebar, terserah Anda dimana selayaknya, namun jangan lupa untuk mengganti kode yang saya beri warna Merah dengan URL blog Anda terlebih dahulu seperti ini:

<script type='text/javascript'>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Prev",
    nextText       = "Next",
    siteUrl        = "http://sahabatblogger77.blogspot.com",
    postPerPage    = 10,
    numChars       = 370,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/sitemap-blogger-facebook-theme.js"></script>

Elemen Data HTML Template Halaman Komentar

Elemen Data HTML Template Halaman Komentar - Kode-kode elemen data HTML berikut bukan untuk Anda gunakan pada Template blog Anda, karena pada umumnya struktur dan tata letak kode HTML seperti ini sudah terdapat pada template blog untuk mengatur tampilan halaman komentar. Mungkin ada beberapa kode yang tidak sama seperti yang Anda gunakan di template blog Anda, karena sudah terjadi beberapa perubahan seiring Validasi HTML untuk konsep versi template.
Lebih jelasnya baca Pengertian HTML Template Berdasarkan Versi.

Dalam konsep versi template, struktur elemen data HTML pada halaman komentar pada umumnya seperti ini:


Elemen Data Pada Template Versi-1

<b:includable id='comment-form' var='post'>
  <div class='comment-form' id='comment-form'>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup' style='width:100px;height:20px;'/>
    </b:if>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Elemen Data Pada Template Versi-2

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form' id='threaded-comment-form'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Halaman komentar biasanya dibentuk dengan elemen <b:includable>, jika pada versi-versi template terjadi perubahan, mungkin hanya bertambah satu elemen saja, sehingga bentuk konsep kodenya kurang lebih menjadi seperti ini:

<b:includable id="comments">

//perubahan konsep...
<b:includable id="threaded_comments">

Sehingga menghasilkan deklerasi elemen data untuk mengatur bentuk tampilan HTML Template pada seksi komentar yang pada umumnya digunakan saat ini.

<div class='comments' id='comments'>

  1. Judul Komentar
  <h4>0 Komentar:</h4>

  2. Navigasi Jumlah Komentar
  <span class='paging-control-container'> ... </span>

  3. Daftar Komentar
  <div id='Blog1_comments-block-wrapper'>
    <dl class='avatar-comment-indent' id='comments-block'>
      ...
    </dl>
  </div>

  4. Halaman Komentar (footer)
  <div class='comment-footer'> ... </div>

  5. Backlink
  <div id='backlinks-container'> ... </div>

</div>

PENGENALAN FUNGSI ELEMEN DATA
1. Judul Komentar
Pada halaman blog tampilan ini biasanya berupa elemen heading (H4) untuk menampilkan sebuah tulisan yang menunjukkan berapa jumlah komentar, pada HTML Template kodenya seperti ini:

<h4>
  <b:if cond='data:post.numComments == 1'>1
    <data:commentLabel/>:
  <b:else/>
    <data:post.numComments/>
    <data:commentLabelPlural/>:
  </b:if>
</h4>

//atau bisa diganti dengan elemen seperti ini:
<h4><data:post.commentLabelFull/>:</h4>

KETERANGAN DAN FUNGSI KODE HTML HALAMAN KOMENTAR (XML Markup Element Structur)

DATA	FUNGSI TAMPILAN	HASIL
data:post.numComments	Elemen ini akan menghasilkan nilai berupa jumlah komentar yang telah masuk	7 komentar
data:commentLabel	Elemen ini akan menghasilkan label komentar singular	Comment, Komentar
data:commentLabelPlural	Elemen ini akan menghasilkan label komentar plural	Comments, Komentar
data:top.commentLabel	Fungsinya sama dengan data:commentLabel	-
data:post.commentLabelFull	Elemen untuk mewakili semua markup seperti diatas	0 Comment, 7 Comments, 7 Komentar

2. Navigasi Jumlah Komentar
Fungsi elemen pada navigasi ini hanya akan ditampilkan yang apabila jumlah angka pada halaman komentar sudah mencapai batas angka yang sudah ditentukan (jika sudah melebihi 200 comment), <span class='paging-control-container'>.

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

3. Daftar Komentar
Menghasilkan urutan daftar komentar yang telah masuk atau yang sudah ditampilkan oleh author (untuk komentar moderasi). Jika pada template elemen ini dibentuk dengan definition list atau ordered list seperti ini:

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
  <dl expr:class='data:post.avatarIndentClass' 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'>
        <b:if cond='data:comment.favicon'>
          <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px' />
        </b:if>
        <a expr:name='data:comment.anchorName'/>
        <b:if cond='data:blog.enabledCommentProfileImages'>
          <data:comment.authorAvatarImage/>
        </b:if>
        <b:if cond='data:comment.authorUrl'>
          <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <data:commentPostedByMsg/>
        <b:else/>
          <data:comment.author/> <data:commentPostedByMsg/>
        </b:if>
        <span class='comment-timestamp'>
          <a expr:href='data:comment.url' title='comment permalink'>
            <data:comment.timestamp/>
          </a>
          <b:include data='comment' name='commentDeleteIcon'/>
        </span>
      </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'></dd>
    </b:loop>
  </dl>
</div>

KETERANGAN DAN FUNGSI KODE HTML HALAMAN KOMENTAR (XML Markup Element Structur)

DATA	FUNGSI TAMPILAN	HASIL
data:post.avatarIndentClass	Elemen ini akan menghasilkan nama kelas indentasi avatar	avatar-comment
data:comment.authorClass	Elemen ini akan menghasilkan nama kelas administrator	blog-author
data:comment.anchorName	Elemen ini akan menghasilkan deret karakter yang nantinya akan berguna sebagai pendukung permalink komentar	-
data:comment.favicon	Elemen ini akan menghasilkan favicon komentator yang tidak memiliki foto profil	Gambar logo Blogger
data:comment.authorAvatarImage	Elemen ini akan menghasilkan foto profil	Gambar
data:comment.authorUrl	Elemen ini akan menghasilkan tautan profil penulis komentar	http://Url-profile
data:comment.author	Elemen ini akan menghasilkan nama penulis komentar	Your-Name
data:commentPostedByMsg	Elemen ini akan menghasilkan label kata sebelum nama komentar	mengatakan....
data:comment.url	Elemen ini akan menghasilkan URL permalink komentar	...
data:comment.timestamp	Elemen ini akan menghasilkan timestamp penerbitan komentar	12/10/14 01:15 WIB
data:comment.isDeleted	Berisi sebuah informasi untuk menyatakan bahwa komentar sudah dihapus	Nilai true, false
data:comment.body	Elemen ini akan menghasilkan badan komentar untuk menuliskan teks	Terimakasih, Bla...
data:comment.id	Elemen ini akan menghasilkan ID komentar berupa Angka	1837252826...
data:comment.inReplyTo	Elemen ini hanya akan menghasilkan ID komentar induk, jika komentar tersebut merupakan komentar balasan dari salah satu komentar yang ada	...
data:comment.authorAvatarSrc	Elemen ini akan menampilkan URL avatar komentar	http://url-image.jpg

4. Halaman Komentar (Footer)
Fungsi elemen pada halaman ini, biasanya mengatur deskripsi pesan komentar dan formulir komentar, umumnya berbentuk seperti ini:

<div class='comment-footer'>
  <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
      <b:include data='post' name='comment-form'/>
    <b:else/>
      <data:post.noNewCommentsText/>
    </b:if>
  <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>
</div>

KETERANGAN DAN FUNGSI KODE HTML HALAMAN KOMENTAR (XML Markup Element Structur)

DATA	FUNGSI TAMPILAN
data:post.embedCommentForm	Untuk menyatakan opsi peletakkan formulir komentar tersemat di bawah posting
data:post.allowNewComments	Untuk menyatakan bahwa administrator memperbolehkan masuknya komentar baru
data:post.noNewCommentsText	Elemen ini akan menghasilkan pesan bahwa komentar baru tidak diperbolehkan (Komentar baru tidak di ijinkan)
data:post.addCommentUrl	Elemen ini akan menghasilkan URL komentar jendela munculan
data:postCommentMsg	Elemen ini akan menghasilkan label tautan pengeposan komentar (Poskan Komentar)

Semoga penjabaran struktur Elemen Data HTML Template diatas, dapat memudahkan sahabat semua pecinta SAHABAT BLOGGER 77 dalam Belajar Mengenal Bahasa Markup HTML Template, sehingga akan lebih mudah untuk melakukan peng-editan tampilan halaman komentar blog jika sewaktu-waktu Anda butuhkan.

Menghilangkan Daftar Artikel Pada Halaman Beranda

Menghilangkan Daftar Artikel Pada Halaman Beranda - Menghilangkan bukan "Menghapus", karena jika semua daftar artikel pada halaman beranda dihapus, berarti postingan juga akan ikut terhapus. Namun jika menghilangkan berarti artikel tetap ada, tetapi tidak terlihat oleh pengunjung blog, bahkan oleh Anda sendiri, jadi semua daftar artikel akan benar-benar hilang pada halaman beranda seperti tampilan gambar di bawah ini:

Bagaikan memiliki rumah sendiri yang terbebas dari ibu kontrakan hehe..!, kini halaman beranda blog Anda akan terbebas dari semua daftar artikel/posting yang telah di publikasikan. Untuk itu di pertemuan kali ini SAHABAT BLOGGER 77 kembali hadir menyapa sahabat semua dengan memberikan tips keren tentang bagaimana cara Menghilangkan Daftar Artikel Pada Halaman Beranda serta cara menggantikannya dengan ucapan/kata sambutan seperti ini:




DEMO SHOW



Untuk dapat menghilangkan daftar artikel tersebut, kita hanya butuh satu element kode untuk membungkus struktur halaman home dengan tag kondisional halaman beranda seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
/**--
tata letak element homepage
...
</b:if>

PENERAPAN ELEMENT
- Pada dahsboard, pilih menu Template
- Edit Template
- Temukan kode seperti ini:

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Jika sudah ketemu, Tepat di atas kode tersebut, letakkan kode ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:section class='main' id='homepage'></b:section>
<b:else/>
...
//Pada akhir kode, letakkan tag penutup ini:
</b:if>

sehingga hasil akhirnya akan tampak seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:section class='main' id='homepage'></b:section>
<b:else/>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
  </b:section>
</b:if>

Tidak ada yang terhapus dan juga tidak ada yang hilang, karena yang barusan Anda lakukan hanyalah menggandakan elemen <b:section>, sehingga element yang satu hanya akan tampil di halaman muka, sedangkan satunya lagi akan tampil selain di halaman muka.

Pekerjaan Anda sudah selesai, jangan lupa "Klik Save Template". Sekarang coba lihat hasilnya pada dahsboard tata-letak, jika berhasil, maka widget posting pada screen short tata letak akan menghilang dan digantikan oleh sebuah formulir untuk menambahkan widget baru seperti ini:

Nah..!! Dari element itu Anda bisa menambahkan beberapa variasi tampilan widget yang hanya akan ditampilkan pada halaman beranda/home. Terserah pada Anda widget seperti apa yang ingin Anda sajikan sebagai pengganti link-home. Untuk alternatif, disini sudah saya siapkan beberapa widget keren untuk menghias tampilan halaman beranda seperti:

➟ Cara Mengganti Halaman Beranda Dengan Kata Sambutan
➟ Membuat Tampilan Popular Post Dengan Slideshow
➟ Cara Membuat Widget Slideshow Efek 3D Gallery
➟ Cara Membuat Site Map Terbaru | Daftar Isi Blog


Semoga hari-hari Anda selalu menyenangkan !!Happy Blogging.

Membuat Label Blogger Accordion Efek Tabulasi

Membuat Label Blogger Accordion Efek Tabulasi - Membuat sebuah tulisan/postingan sudah pasti diberi judul, begitu juga dengan jumlah keseluruhan postingan pada blog yang kita rangkum dalam satu judul, judul inilah yang disebut "LABEL". Dalam satu judul ada satu tulisan, sedangkan dalam 1 label bisa mencapai puluhan bahkan ratusan judul, sehingga membuat rangkuman pada keseluruhan postingan blog sangat penting untuk membuat label disetiap postingan, agar nantinya kita dengan mudah menemukan tulisan tersebut dengan nama label yang telah kita beri tanda.

Untuk Tampilan Label pada tutorial kali ini memang sepintas mirip dengan desain sebelumnya tentang Cara Membuat Daftar Isi Blogger Terbaru Dengan Efek Sortir. Kesempatan kali ini, saya sudah menyiapkan tutorial hangat buat sahabat semua pecinta SAHABAT BLOGGER 77 dengan Cara Membuat Label Blogger Accordion Efek Tabulasi seperti ini:

Yuk..! Baca juga - Cara Menonaktifkan Fungsi Copy Paste Pada Area Tertentu


Menggunakan Perintah element CSS-target dengan sistem accordion desain pada link-hover, menggunakan warna link-focus untuk meng-hover url-menu label, dan saya bungkus dengan model tabulasi sebagai tampilan label dan menghasilkan efek seperti ini:




DEMO SHOW



PENERAPAN KE BLOG
1.1 Element CSS.

- Pada dahsboard, pilih menu Template
- Edit Template
- Temukan kode ]]></b:skin>
- Copy lalu letakkan kode dibawah ini diatasnya

#sb77-label .list-wrap {
  background:#eee;
  background:linear-gradient(left top, #eee 40%, #d0e0e3);
  border-left:inset 8px rgba(224,0,0,.5);
  padding: 10px;
  margin: 0 auto;}

#sb77-label .nav {overflow:hidden;margin:-6em 0 -10px -5px;}
#sb77-label .nav li {width:118px;float:left;margin:0 5px 0 0;}
#sb77-label .nav li a:hover {background-color:#111;}
#sb77-label .nav li.last {margin-right:0;}
#sb77-label .nav li a {
  display:block;
  padding:5px;
  background:#959290;
  color:white;
  font:normal 12px/normal Verdana,serif;
  text-align:center; border: 0;}

#sb77-label ul {list-style:none;padding:0 10px 15px 5px;}
#sb77-label ul li a:hover {background:#fe4902;color:white;}
#sb77-label ul li a {
  display:block;
  padding:3px;
  color:#666;
  border-bottom:1px dotted #666;}

#sb77-label ul li.nav-one a.current,
#sb77-label ul#desain-template li a:hover {background-color:#0575f4;color:white;}
#sb77-label ul li.nav-two a.current,
#sb77-label ul#efek-gambar li a:hover {background-color:#d30000;color:white;}
#sb77-label ul li.nav-three a.current,
#sb77-label ul#css-widget li a:hover {background-color:#8d01b0;color:white;}

2.1 Script jQuery.

Pastikan template Anda sudah menggunakan jQuery ini (kode yang saya beri warna Merah), jika sudah terpasang di template Anda, abaikan saja, namun jika belum copy script berikut lalu tempatkan pada area </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
    $(function() {
        $("#sb77-label").organicTabs();       
        $("#sb77-demo").organicTabs({
            "speed": 200
        });
    });
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/accordion-tab-of-blogger-label.js"></script>

3.1 HTML Markup.

Anda cukup tempatkan HTML berikut pada area dimana label blogger ini akan Anda tampilkan pada blog Anda, namun jang lupa ganti teks label yang saya beri warna Biru dengan nama label blog Anda seperti ini:

<div id="sb77-label">
   <ul class="nav">
      <li class="nav-one"><a href="#desain-template" class="current">Desain Template</a></li>
      <li class="nav-two"><a href="#efek-gambar">Efek Gambar</a></li>
      <li class="nav-three last"><a href="#css-widget">CSS Widget</a></li>
   </ul>
     <div class="list-wrap">
      <ul id="desain-template">
       <ol>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
       </ol>
      </ul>

      <ul id="efek-gambar" class="hide">
       <ol>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
       </ol>
      </ul>

      <ul id="css-widget" class="hide">
       <ol>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
       </ol>
      </ul>
     </div>
</div>

Jika sudah tidak ada masalah, saya tunggu ucapan terima kasih Anda pada kolom komentar dibawah.

Happy Blogging, semoga dapat bermanfaat.!

Cara Membuat Site Map Terbaru | Daftar Isi Blog

Cara Membuat Site Map Terbaru | Daftar Isi Blog - Sebuah tantangan yang cukup menguras waktu, pikiran dan tenaga dalam membuat daftar isi blog terbaru kali ini. Desain Site Map (Daftar Isi) terbaru kali ini mungkin dapat menggantikan tempat daftar postingan yang ada pada halaman beranda (HOME) menjadi daftar isi dengan sistem sortir yang lebih menarik seperti ini:




DEMO SHOW


Pada Desain content saya menggunakan tampilan default tataan daftar artikel yang pada umumnya ada pada halaman beranda, namun pada text header, saya membuat tab dengan 3 tombol pilihan sortir untuk memudahkan pengunjung Anda dalam menjelajah semua isi artikel pada blog, termasuk postingan yang pernah Anda perbaharui.

TAHAP PENERAPAN

<div id="table-contents">
   <div id="sitemap-menu">
     <div class="isi-content">
       <div class="sb77-left">
        <label>Cari Artikel Berdasarkan:</label>
   </div>
         <div class="sb77-right">
<select id="orderFeedBy"><option selected="" value="published">Posting Terbaru</option><option value="updated">Posting Diperbaharui</option></select>
        </div>
      </div>
   <div class="isi-content">
         <div class="sb77-left">
          <label>Mencari Artikel Berdasarkan File:</label>
         </div>
         <div class="sb77-right">
<span id="labelSorter"><select disabled=""><option selected="">Category File...</option></select></span>
         </div>
      </div>
                 <div class="isi-content">
                     <div class="sb77-left">
  <label>Temukan Dengan Mudah, Ketik Teks Anda <span style="color:red;">&#10142;</span></label>
                     </div>
          <div class="sb77-right">
    <form id="postSearcher">
 <input type="text" />
   </form>
            </div>
         </div>
      </div>
   </div>
</div>
<header id="resultDesc" style="color: white; font-weight: bold;"></header>

<ul id="feedContainer"></ul>
  <div id="feedNav">
     <span class="loadingx">Loading...
     </span>
  </div>

Berikut salinan elemen CSS yang dapat Anda edit sendiri, jika kiranya ingin tampilan yang berbeda dari yang terlihat pada tombol DEMO SHOW diatas:

<style type="text/css">
/*sitemap sortir post design with menu show
css value='sitemap-menu','sb77-code'
link="http://sahabatblogger77.blogspot.com"
Author design: devy indriyani*/
#main-wrapper {background:transparent;}
h2.post-title {border-top:1px solid #444;border-bottom:1px solid #444;color:#000;}
.post-body {margin:4px 0px;border:none;color:#000;text-shadow:none;}
#blog-pager, .breadcrumbs {display:none;}
.comments {border:none}
#main-wrapper {box-shadow:none}
#sitemap-menu{
  border-bottom: 4px solid #080;
  color: black;
  overflow: hidden;
  padding: 3px 0;}

.isi-content{overflow:hidden}
.sb77-left{
  float:left;
  height: 22px;
  line-height: 20px;
  text-align: left;
  width: 49%;}

.sb77-right{float:right;width:50%}
.isi-content select{width:100%;border:1px dotted #ccc;padding:1px;background-color:#39f;color:white}
.isi-content input{border:0;outline:0;margin:0;width:100%;background:#ddd;}
.isi-content form{padding:0;}
ul#feedContainer,ul#feedContainer li{margin:0;list-style:none;padding:0;overflow:hidden}
ul#feedContainer li{
  background-color: #d9ead3;
  border: 1px solid #cccccc;
  display: block;
  float: left;
  height: 95px;
  margin: 5px;
  padding: 10px 10px;
  position: relative;
  width: 44.0%;}

.inner img{
  background:#cccccc;
  border: 2px solid #080;
  float: left;
  margin: 4px 6px 0 0;
  padding: 2px;
  box-shadow:
  inset 1px 1px 4px rgba(0,0,0,0.5),
  0 2px 3px rgba(0,0,0,0.6);}

.toc-title{font-family:'Coda';font-size:14px;color: blue !important;}
.inner strong{font-weight:normal;font-size:10px;color:#b30000}
.news-text{font-size:11px;line-height:13px;color:#000000 !important}

#feedNav .next,#feedNav .front,#feedNav .loadingx, #feedNav span{
  width:100%;
  display:block;
  text-align:center;
  height:30px;
  line-height:30px;
  background-color:#080;
  color:white;}

@media only screen and (min-width:768px) and (max-width:989px){ul#feedContainer li {height: 108px;width: 100%;margin: 0}}
@media only screen and (max-width:767px){ul#feedContainer li {height: 108px;width: auto;margin: 0}}
@media only screen and (max-width:479px){ul#feedContainer li {width: auto;margin: 0;height: 135px;}}
</style>

<script src="https://s-blogger77.googlecode.com/svn/trunk/siteMap-style-menu-show.js"></script>
<script>
document.body.oncontextmenu=function() {return false;}
var tocConfig = {
    url: "http://URL-Anda.blogspot.com",
    feedNum: 14,
    labelName: (window.location.hash && window.location.hash != '#0' && window.location.hash != '#search') ? encodeURIComponent(window.location.hash.substr(1)) : false,
    numChars: 100,
    thumbWidth: 70,
    navText: "Load More &#9660;",
    frontText: "Top &uArr;",
    noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NljFsLWVSRuy7eIFNjuuDcvpmaxdcKzECoAwICPSqz0t8rt8sVTgphA24hIuzAF_kLlACfI-Uq1h-CPiRlcR86OHFRs45m8AoLZ2E5pU6YJwhrFlsIrPbRYKx6b-l2tamCzNRx7awW7W/s1600/512px-No_image_available.svg.png",
    loading: "<span>Memuat...</span>",
    searching: "<span>Mencari...</span>",
    noResult: "Tak Ditemukan"
};
</script>

Mungkin Anda juga suka dengan Tampilan yang berbeda di:

Daftar menu Artikel Blog - SAHABAT BLOGGER 77

Cara Mengganti Halaman Beranda Dengan Kata Sambutan

Cara Mengganti Halaman Beranda Dengan Kata Sambutan - Saat Anda bertamu kerumah kerabat, maka dengan mengetuk pintu Anda ucapkan "Assalamu alaikum" sebagai kata salam kepada pemilik rumah. Dan sebaliknya si pemilik rumah mengucapkan "Wa'alaikum salam" sebagai kata sambutan pertanda menerima Anda sebagai tamunya, mungkin begitulah cerita singkat untuk menggambarkan tutorial berikut.
Dengan Cara Mengganti Halaman Beranda Dengan Kata Sambutan seperti ini, setidaknya dapat mencerminkan keramahan Anda kepada mereka yang berkunjung ke blog Anda, dengan begitu, mereka yang berkunjung akan merasa dihormati dan disenangi, tidak menutup kemungkinan esok hari mereka akan datang berkunjung kembali karena keramahan Anda.

Pada umumnya, halaman beranda sudah pasti disana terdapat kumpulan artikel-artikel blog Anda, sehingga di pertemuan sebelumnya saya pernah membuat tutorial tentang Cara Membuat Kalimat Pembuka Pada Halaman Beranda Blog. Hasilnya dapat Anda lihat pada tombol DEMO SHOW di bawah ini:




DEMO SHOW

Untuk Desain halaman beranda kali ini, agar tampilan teks pada kata sambutan terlihat lebih menarik dan cantik, saya memecah title descripsi, dan membalutnya dengan sentuhan efek animasi dengan value second-delay;, sehingga teks pada kata sambutan akan secara bergantian tampil dengan CSS seperti ini:

.text-wrapper{
   width: auto;
   position: relative;
   margin: 0 auto;
   font-family: 'Bree Serif';
   padding: 10px;}

.text-sentence{
   margin: 0;
   text-align: left;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}

.text-sentence span{
   color: #444;
   white-space: nowrap;
   font-size: 130%;
   font-weight: normal;}

.text-words{display: inline;text-indent: 10px;}
.text-words span{
   position: absolute;
   opacity: 0;
   overflow: hidden;
   width: 100%;
   color: red;}

.text-words-1 span{
   -webkit-animation: rotateWordsFirst 18s linear infinite 0s;
   -moz-animation: rotateWordsFirst 18s linear infinite 0s;
   -o-animation: rotateWordsFirst 18s linear infinite 0s;
   -ms-animation: rotateWordsFirst 18s linear infinite 0s;
   animation: rotateWordsFirst 18s linear infinite 0s;}

.text-words-2 span{
   -webkit-animation: rotateWordsSecond 18s linear infinite 0s;
   -moz-animation: rotateWordsSecond 18s linear infinite 0s;
   -o-animation: rotateWordsSecond 18s linear infinite 0s;
   -ms-animation: rotateWordsSecond 18s linear infinite 0s;
   animation: rotateWordsSecond 18s linear infinite 0s;}

.text-words span:nth-child(2) {
   -webkit-animation-delay: 3s;
   -moz-animation-delay: 3s;
   -o-animation-delay: 3s;
   -ms-animation-delay: 3s;
   animation-delay: 3s;
   color: green;}

.text-words span:nth-child(3) {
   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   -o-animation-delay: 6s;
   -ms-animation-delay: 6s;
   animation-delay: 6s;
   color: #38f; }

.text-words span:nth-child(4) {
   -webkit-animation-delay: 9s;
   -moz-animation-delay: 9s;
   -o-animation-delay: 9s;
   -ms-animation-delay: 9s;
   animation-delay: 9s;
   color: #25cf55;}

.text-words span:nth-child(5) {
   -webkit-animation-delay: 12s;
   -moz-animation-delay: 12s;
   -o-animation-delay: 12s;
   -ms-animation-delay: 12s;
   animation-delay: 12s;
   color: #8d6b9d;}

.text-words span:nth-child(6) {
   -webkit-animation-delay: 15s;
   -moz-animation-delay: 15s;
   -o-animation-delay: 15s;
   -ms-animation-delay: 15s;
   animation-delay: 15s;
   color: blue;}

@-webkit-keyframes rotateWordsFirst {
0% {opacity: 1;
    -webkit-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-moz-keyframes rotateWordsFirst {
0% {opacity: 1;
    -moz-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-o-keyframes rotateWordsFirst {
0% {opacity: 1;
    -o-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-ms-keyframes rotateWordsFirst {
0% {opacity: 1;
    -ms-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@keyframes rotateWordsFirst {
0% {opacity: 1;
    animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-webkit-keyframes rotateWordsSecond {
0% {opacity: 1;
    -webkit-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@-moz-keyframes rotateWordsSecond {
0% {opacity: 1;
    -moz-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@-o-keyframes rotateWordsSecond {
0% {opacity: 1;
    -o-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@-ms-keyframes rotateWordsSecond {
0% {opacity: 1;
    -ms-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@keyframes rotateWordsSecond {
0% {opacity: 1;
    animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@media screen and (max-width: 768px){
.text-sentence { font-size: 18px; }}
@media screen and (max-width: 320px){
.text-sentence { font-size: 9px; }}

#text-space span {margin:-1.35em 0 0 58%;}
#text1 span {
   margin:-1.35em 0 0 11%;
   width:363px;
   border-bottom:3px solid indigo;
   max-height:43px;}

.ribbon-box2 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;width:50%;
  padding:6px;background-color:#35ecf9;
  position:relative;
  margin:100px auto;border-left:8px double red;}

.ribbon-box2:after {
  content:"";position:absolute;
  top:0px;left:100%;width:0px;
  height:0px;border:24px solid transparent;
  border-left-color:#35ecf9;}

Dan hasilnya:




DEMO SHOW



Apakah sudah selesai? (hhmm..menurut kamu?!).
Sampai pada tahap ini, pekerjaan Anda belum selesai, sebagai tahapan akhir, Anda tinggal letakkan HTML berikut pada halaman kosong widget HTML/JavaScript pada tata letak halaman beranda. Selanjutnya simpan perubahan.

<section class="text-wrapper">
    <h2 class="text-sentence">
          <span>WELL COME TO MY BLOG</span>
             <span>Title : </span>
    <div class="text-words text-words-1" id="text1">
<span style="color:#080;">SAHABAT BLOGGER 77</span>
<span style="color:#660000;">SAHABAT BLOGGER 77</span>
<span style="color:#38f;">SAHABAT BLOGGER 77</span>
<span style="color:#8d6b9d;">SAHABAT BLOGGER 77</span>
<span style="color:blue;">SAHABAT BLOGGER 77</span>
<span style="color:red;">SAHABAT BLOGGER 77</span>
    </div>

<span class="ribbon-box2">Berbagi pengetahuan seputar</span>
     <div class="text-words text-words-2" id="text-space">
<span>Tutorial Blog</span>
<span>Desain Template</span>
<span>HTML code</span>
<span>CSS dan JavaScript</span>
<span>SEO Tips</span>
<span>Blogging tips</span>
     </div>
   </h2>
</section>

Sebagai pilihan untuk tampilan DAFTAR MENU ARTIKEL, silahkan Anda pilih widget mana yang sesuai dengan nice blog Anda pada tutorial berikut:

➟ Membuat Tampilan Popular Post Dengan Slideshow
➟ Membuat Artikel Terbaru Desain Gallery Dan Tooltip
➟ Cara Membuat Widget Slideshow Efek 3D Gallery


Diam itu emas, namun dengan diam tidak akan pernah mengubah kecerdasan kita dalam berkarya. Untuk itu, saya akan selalu setia menunggu pertanyaan dari sahabat semua pecinta SAHABAT BLOGGER 77 jika kiranya mengalami kesulitan dalam menerapkan kode-kode di atas.

Semoga dapat bermanfaat. Terimakasih.!!

Tata Letak Struktur Elemen HTML Template Halaman Posting

Tata letak struktur elemen HTML Template yang mendukung penampilan posting dalam HTML adalah sebuah elemen <b:includable> ..data..</b:includable> dengan id='post', yang jika dijabarkan dengan bahasa markup HTML kurang lebih seperti ini isi data elemen tersebut:

<div class='post hentry'>
  <h2 class='post-title entry-title'>
    //Letak Judul Posting...
  </h2>
  <div class='post-body entry-content' id='post-body-87834368950900xxx'>
    //Isi Konten Artikel (body)...
  </div>
  <div class='post-footer'>
    //Menu Widget Footer...
  </div>
</div>

Namun teks judul, isi konten dan menu yang terdapat pada footer (catatan kaki) tidak akan ditampilkan nilainya pada struktur HTML Template Anda. Disini akan saya jelaskan sedikit fungsi-fungsi element tersebut yang mendukung penampilan posting pada blog Anda satu persatu, sehingga dengan cara pemahaman seperti ini, dapat memudahkan Anda dalam belajar desain/mendesain Template dengan cepat tanpa harus takut salah hapus kode-kode tertentu.
Berikut tata letak struktur elemen kode HTML Template untuk tampilan halaman posting pada blog :

LETAK JUDUL POSTING
Elemen judul pada struktur HTML Template biasanya berupa elemen heading yang memiliki kelas post-title atau entry-title seperti ini:

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <b:if cond='data:blog.url != data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>

KETERANGAN DAN FUNGSI KODE HTML (XML Markup Element Structur)

ELEMEN DATA	FUNGSI TAMPILAN	HASIL TAMPILAN
data:post.link	Elemen ini akan menghasilkan tautan lampiran yang nilainya Anda atur melalui editor posting	http://www.custom_link_url.com
data:post.url	Elemen ini akan menghasilkan URL posting	http://nama_blog.blogspot.com/2012/11/lorem-ipsum.html
data:post.title	Elemen ini akan menghasilkan judul posting	Lorem Ipsum

ISI ARTIKEL (BODY)
Semua teks yang terdapat pada keseluruhan isi konten tidak akan ditampilkan dalam struktur HTML Template, namun elemen untuk tampilan isi artikel berikut, akan dihasilkan berupa elemen divisi kelas post-body atau entry-content seperti ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <data:post.body/>
  <div class='clear'/> <!-- clear for photos floats -->
</div>

KETERANGAN DAN FUNGSI KODE HTML (XML Markup Element Structur)

ELEMEN DATA	FUNGSI TAMPILAN
data:post.id	Elemen ini akan menampilkan ID posting
data:post.body	Elemen ini akan menampilkan konten posting
data:post.snippet	Elemen ini akan menghasilkan ringkasan posting dalam 100 kata +
data:post.authorPhoto.url	Elemen ini akan menghasilkan URL gambar foto profil penulis
data:post.authorProfileUrl	Elemen ini akan menghasilkan URL profil penulis
data:post.authorAboutMe	Elemen ini akan menghasilkan deskripsi profil penulis

MENU WIDGET FOOTER
Letak widget catatan kaki (FOOTER) biasanya berisi elemen data yang memiliki kelas post-footer seperti ini:

<div class='post-footer'>

  <div class='post-footer-line post-footer-line-1'>
    <span class='post-author vcard'>
      <b:if cond='data:top.showAuthor'>
        <data:top.authorLabel/>
        <span class='fn'>
          <data:post.author/>
        </span>
      </b:if>
    </span>
    <span class='post-timestamp'>
      <b:if cond='data:top.showTimestamp'>
        <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
      </b:if>
    </span>
    <!-- quickedit pencil -->
    <b:include data='post' name='postQuickEdit'/>
    <span class='post-comment-link'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </b:if>
    </span>
    <!-- Feature added by BTemplates.com -->
    <b:if cond='data:post.sharePostUrl'>
      <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div>
    </b:if>
  </div>

  <div class='post-footer-line post-footer-line-2'>
    <span class='post-labels'> ... </span>
    <b:if cond='data:top.showMobileShare'>
      <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
        <a href='javascript:void(0);'><data:shareMsg/></a>
      </div>
    </b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'>
        <data:post.dummyTag/>
      </div>
    </b:if>
    <b:if cond='data:top.showMobileShare'>
      <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
        <a href='javascript:void(0);'><data:shareMsg/></a>
      </div>
    </b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'>
        <data:post.dummyTag/>
      </div>
    </b:if>
  </div>

  <div class='post-footer-line post-footer-line-3'><span class='post-location'>
    <b:if cond='data:top.showLocation'>
      <b:if cond='data:post.location'>
        <data:postLocationLabel/>
        <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
      </b:if>
    </b:if>
  </span> </div>

</div>

KETERANGAN DAN FUNGSI KODE HTML (XML Markup Element Structur)

ELEMEN DATA	FUNGSI TAMPILAN
data:top.authorLabel	Label keterangan sebelum nama penulis
data:post.author	Elemen ini akan menghasilkan nama penulis
data:top.timestampLabel	Label keterangan sebelum waktu penerbitan
data:post.timestamp	Elemen ini akan menampilkan waktu penerbitan dalam format timestamp
data:post.addCommentUrl	Elemen ini akan menampilkan URL posting dengan tambahan hash [#comment-form]
data:postLocationLabel	Elemen ini akan menampilkan label lokasi sebelum keterangan lokasi penerbitan posting
data:post.location.mapsUrl	Elemen ini akan menghasilkan URL lokasi dalam peta Google
data:post.location.name	Elemen ini akan menampilkan lokasi penerbitan posting yang telah dituliskan dalam formulir lokasi

DESAIN TEMPLATE TO THE NEXT (Referensi Themes)
➵ Pengertian HTML Template Berdasarkan Versi
➵ Belajar Mengenal Bahasa Markup HTML Template
➵ Sekilas Tentang META Tag Dalam Bahasa HTML