93 Fungsi Kode Untuk Mengatur Tampilan Content Blog

Seperti yang kita ketahui, template blog dengan gaya Magazine Style merupakan salah satu favorit template yang sering di pakai oleh para blogger. Salah satu ciri template blog dengan gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog.

Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda terapkan untuk mengatur tampilan widget blog Anda.

1. Hanya pada Halaman Utama Blog

<b:if cond='data:blog.url == data:blog.homepageUrl'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika sobat mengklik Label Post atau membaca postingan secara keseluruhan.
Contoh penggunaan kode ini bisa anda liat pada demo blog berikut. Jika sobat membaca artikel secara keseluruhan atau mengklik kategori post, 3 kolom diatas main post akan menghilang.

2. Kategori Post dan Single Post

<b:if cond='data:blog.url != data:blog.homepageUrl'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (membaca postingan secara keseluruhan).
Contoh penggunaan kode ini bisa Anda lihat pada demo blog tadi dimana ketika sobat mengklik kategori post atau membaca postingan secara keseluruhan, widget pada kolom footer dengan judul DheTemplate.com - New Free Blogger Template Everyday baru muncul. Widget ini tidak akan muncul pada halaman utama blog.

3. Halama Utama Blog dan Kategori Post

<b:if cond='data:blog.pageType != &quot;item&quot;'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca postingan secara keseluruhan.
Contoh penggunaan kode ini pada demo blog tersebut adalah widget pada sidebar kiri dengan judul New Templates. Jika sobat membaca suatu postingan secara keseluruhan atau mengklik kategori post (About dan DheTemplate pada menu navigasi), maka widget tersebut akan menghilang.

4. Single Post
 

<b:if cond='data:blog.pageType == &quot;item&quot;'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.
Contoh penggunaan kode ini pada demo blog tersebut adalah widget sidebar kiri dengan judul Blog Template dimana saat sobat membaca suatu postingan secara keseluruhan, maka widget tersebut baru muncul.

5. Halama Utama Blog dan Kategori Post

<b:if cond='data:blog.pageType == &quot;index&quot;'>

Fungsi kode ini sama dengan fungsi kode pada nomer 3.

6. Menampilan Widget Blog Pada Postingan Tertentu Saja

<b:if cond='data:blog.url == &quot;URL_POST_TERTENTU&quot;'> ... </b:if>

Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu. Untuk lebih jelasnya silahkan sobat melihat demo blog tersebut. Lalu klik artikel post dengan judul DheTemplate.com - New Free Blogger Template Everyday. Anda akan melihat widget blog dengan judul Templates By DheTemplate muncul. Widget tersebut tidak akan muncul apabila sobat membaca postingan blog yang lain. Misalnya sobat membaca postingan pada demo blog tersebut dengan judul DheTemplate.com, maka widget tersebut tidak akan muncul.

7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja

<b:if cond='data:blog.url != &quot;URL_POST_TERTENTU&quot;'> ... </b:if>

Kode ini merupakan kebalikan dari kode no 6 dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul pada postingan yang lain. Untuk lebih jelasnya, sobat klik artikel post dengan judul DheTemplate.com - New Free Blogger Template Everyday dan bandingan jika sobat mengklik postingan dengan judul DheTemplate.com. Apa yang akan Anda dapat?? Widget blog dengan judul BlogList tidak muncul pada artikel postingan dengan judul DheTemplate.com - New Free Blogger Template Everyday dan widget tersebut baru muncul pada artikel postingan dengan judul DheTemplate.com. termasuk juga artikel postingan yang lain dan halaman utama dan kategori post  

Mungkin itu saja yang saya tahu tentang cara membuat widget blog dari muncul menjadi menghilang atau menghilang kemudian muncul. Untuk penerapan kode-kode diatas ada 2 cara yaitu langsung pada widget dan secara kelompok (mungkin pada artikel selanjutnya). Semoga bermanfaat.

Penulis :
DheTemplate - "New Free Blogger Template Everyday - Everyday Is New free Blogger Template"
Blog : http://www.DheTemplate.com

selengkapnya →

103 Blogger Statistik

Tampilan grafis sederhana namun terasa nyaman digunakan, itulah kesan pertama saya ketika mencoba fitur terbaru dari Blogger Statistik.  Dari sekian banyak fitur yang sudah ditanam kedalam Blogger, baru kali ini saya merasa semuanya terasa lengkap. Kalau sebelumnya saya harus login bolak balik ke Google Analytics, kali ini semua terlihat lebih simple kerena sebagian fitur penting dari Google Analytics sudah tertanam kedalam fitur Blogger Statistik yang bisa kita lihat langsung melalui halaman Dashbord. oh iya..untuk bisa mencoba fitur ini karena masih dalam tahap uji coba,  maka rekan bisa mengaksesnya melalui halaman Blogger In Draft

 

 

Biar lebih mudah mempelajari semua fitur yang ada, disini saya coba uraikan satu-persatu :

 

1. Blogger Statistik Overview

Fitur ini memungkinkan kita melihat statistik dari jumlah kunjungan secara global. Dengan tampilan statistik terbagi menjadi 4 bagian, kita sebagai admin tentu dipermudah menganalisa trafik secara real time, melihat minat pengunjung dan menganalisa dari mana saja pengunjung blog kita berasal. Untuk yang lebih spesifik lagi kita dapat memilih waktu penanyang yang tersedia dapat beberapa tab, bisa dalam hari, minggu, bulan atau pada total waktu keseluruhan.

 

2.  Blogger Statistik Post

Gak perlu dijelaskan panjang lebar untuk statistik post, kita tentu sudah mengerti maksud dari penayang ini, Singkatnya kita dapat melihat langsung postingan atau artikel mana yang paling banyak diminati pengunjung. Nah kalau mau menganalisa lebih jeli,  statistik post dengan nilai terbesar bukan hanya berisi artikel menarik atau karena posting ini baru diterbitkan, tapi kata kunci sesuai penargetan juga berpengarur besar lho :) yang lebih kren lagi jika blog kita khusus untuk jual-beli barang tentu kita bisa dengan mudah mengalisa barang apa saja yang paling banyak dicari pembeli :)

 

3. Blogger Statistik Traffic Sources

Bagaimana cara pengunjung menemukan blog kita? disinilah semuanya trafik kujungan tercatat dan ditampilkan kedalam bentuk laporan. Ada 3 bagian yang bisa kita anlisa yaitu, bisa melalui Referring URLs, Referring Sites dan Search Keyword.

 

4. Blogger Statistik Audience

Sangat menarik jika kita dapat dengan mudah mengalisa dari negara mana saja pengujung kita berasal, Web Browser dan SO apa saja yang paling banyak digunakan untuk menampilkan halaman blog kita. Ingat pengunjung adalah raja, tentu kita berharap memberikan servis terbaik untuk mereka.

 

Satu hal menurut saya ada yang kurang atau memang sengaja tidak ditampilkan, kenapa blogger hanya menampilkan statistik untuk jumlah pageviews tanpa menampilkan jumlah visitor? atau memang jumlah visitor langsung djumlahkan dengan kedalam statistik pageviews. yah siapa yang tau...ditunggu aja kabar selanjutnya... :)

selengkapnya →

106 Membuat Highlighting Current Page atau Current Menu di Blogger

Highlighting Current Page atau Current Menu biasanya diartikan sebagai penanda halaman aktif untuk saat ini ketika user berada dalam halaman tertentu, misalkan dalam halaman Home, About, Help us dan Contact. Pada Blogger sendiripun sebenarnya baru-baru saja sudah menanamkan fitur ini jika kita sedang mengaktifkan fitur untuk halaman (Page). Namun entah kenapa kebanyakan blogger termasuk saya sendiri tidak begitu tertarik menggunakan. Mungkin sudah telat kali ya :)

 

Yang membuat Saya tertarik untuk membahas fungsi Current Page ini karena hampir semua template yang saya sediakan di zoomtemplate.com sudah tertanam fitur untuk menampilkan menu navigasi, sayangnya ya itu tadi, menu yang seharusnya bagus malah seperti hanya sebagai hiasan pengganti link saja, dan kebanyakan hanya terlihat cantik ketika user mengarahkan mouse (mouse hover) namun tidak memiliki fitur penanda bahwa menu tersebut seharusnya terlihat ikut aktif dalam halaman yang juga aktif.

 

Sebagai contoh silahkan rekan melihat demonya di zoomtemplate.com

 

 

 

Disitu bisa rekan lihat saat kita berada dalam area halaman HOME, Link menu HOME juga terlihat ikut aktif. Begitupula saat rekan berapa dalam halaman FAQ'S dan beberapa Menu lainnya yang terlihat juga ikut aktif. 

 

Biar lebih mudah mempelajarinya silahkan Download contoh Demo Menu yang sudah saya rancang disini.

 

 

OK langsung ke tutorial saja ya. Oh iya contoh menu dibawah ini tidak sama dengan contoh menu di zoomtemplate.com, tapi rekan dapat mengedit menu tersebut sesuai kebutuhan. Terus terang saya kesulitan menjelaskannya, karena hampir setiap kode CSS Menu memiliki rancangan yang unik dan berbeda.Tapi dengan contoh kali ini saya yakin rekan paling tidak mempunyai sedikit gambaran bagaimana cara Aktive Curren Page / Current Menu ini bekerja.

 

1. Silahkan langsung tuju ke halaman Edit HTML

 

2. Letakan kode CSS dibawah tepat diatas kode ]]></b:skin>
 

#nav ul {
background:url(http://1.bp.blogspot.com/_C6KkooKXCEw/TBoL1r2WrmI/AAAAAAAAGDo/RPFGeeHuA6M/s400/backgr.jpg) repeat-x left top;
margin:0;
border-bottom:3px solid #98CB00;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
#nav li {
float:left;
}
#nav li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Trebuchet MS";
font-stretch:condensed;
text-decoration:none;
color:#00CCFF;
letter-spacing: -0.1em;
}
#nav li a:hover {
color:#98CB00;
}
#nav li.current {
background:url(http://2.bp.blogspot.com/_C6KkooKXCEw/TBoL199-A9I/AAAAAAAAGDw/v2878UtlPsA/s400/current.gi) no-repeat center bottom;
color:#98CB00;
}

 

2. Letakan kode Javascript dibawah ini tepat diatas kode </head>

 

<script type='text/javascript'>
//<![CDATA[

function extractPageName(hrefString)
{
var arr = hrefString.split('/');
return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}
function setActiveMenu(arr, crtPage)
{
for (var i=0; i<arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != "DIV")
{
arr[i].className = "current";
arr[i].parentNode.className = "current";
}
}
}
}
function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;

if (document.getElementById("nav")!=null)
setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString));
}

//]]>
</script>

 

3. Kemudian silahkan cari kode dibawah ini dalam barisan kode pada halaman Edit HTML

 

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

 

Lalu letakan kode dibawah ini tepat diatas kode diatas.

 

<div id='nav'>
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='#'>FAQ'S</a></li>
<li><a href='#'>HELP US</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
<script language='javascript'>setPage()</script>
</div>

 

Agar Efek Current Page / Menu bisa bekerja, rekan harus mengganti tanda # diatas dengan alamat url post yang aktif.

 

Untuk membuat dan mengedit tampilan menu jauh lebih cantik dari contoh menu diatas rekan sebaiknya mau tidak mau harus banyak mempelajari pengkodean HTML, CSS dan Javascript.

 

Selamat mencoba :)

selengkapnya →

114 Blogger Template: Baby Shop

Baby Shop Blogger Template merupakan desain template yang khusus saya konversi buat rekan yang ingin membangun toko online sederhana terutama yang ingin berjualan pernak pernik peralatan Bayi. Dengan style tampilan yang sangat elegant dan terlihat profesional, template ini tentu saja dirancang khusus bergaya Gallery plus Magazine, tidak lupa juga sudah saya tanam fitur SEO didalamnya biar jualannya lancar hehehehe. Tapi sayang, karena terbatasnya fasilitas di blogger ruang gerak saya untuk merancang memiliki fitur Shoping Cart jadi batal, jadi pemesanan per item hanya bisa dilakukan secara manual. yah anggap saja transkasi jual beli  dan pembayaran nanti dilakukan secara manual saja via rekening bank atau via Paypal juga gak masalah. Ok selamat berjualan :)

Demo: http://babyshop-zoomtemplate.blogspot.com

Download: http://www.zoomtemplate.com/2010/06/baby-shop.html

selengkapnya →

101 Blogger Template: Smart Touch

Smart Touch merupakan Blogger template hasil konversi dari CSS template ke blogger dengan tampilan elegant dengan warna biru yang menawan, template ini seperti biasa sudah tertanam fitur SEO Friendy, auto bookmark dan Ads Ready, jadi rekan gak kesulitan lagi mengatur semuanya karena sudah All in one :)

Demo: http://smarttouch-zoomtemplate.blogspot.com

Download: http://www.zoomtemplate.com/2010/05/smart-touch.html

selengkapnya →

45 Blogger Template: Dating Theme / Love Letter

Dating theme atau love leter template terbaru hasil konversi om, dengan warna ping dan love-love berhamburan, cocok buat yang lagi sedang jatuh cinta atau blog yang menulis tentang kata-kata mutiara, so jadilah yang pertama mencobanya hehehhehe

Demo: http://datingthemes-zoomtemplate.blogspot.com
Download: http://www.zoomtemplate.com/2010/05/dating-theme.html

selengkapnya →