Sabtu, 17 Juli 2010

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 href="http://demoblog-ajah.blogspot.com/" target="_blank">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

Jumat, 02 Juli 2010

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... :)

Kamis, 17 Juni 2010

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBlj9HHKJ2OOm2fCzFZPlRpqk-uTUyeaU3GgYzgt_rzMoMAU14RkH3XPiqwvfV95T6-2-KuIYiAGvMoS3vxUUnwsEx-mUJSdkTQG2GQdAa7XwBaOqYNYwfVHxl-aeLzYtxwvTLKTgJeKHP/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX-u_4DGfTw8p5NLOB4EgVqbskPG6Fkos9JEmREwRT5tdrWPMG0ykmqHrFpNqMaNV4dG-j9i8bw3Bkmo45ndssAlK1L3dPuxwuhZmgmFXRoy9BHsWhTgiviRx-SZPLGDfX-cXHnfm9-8wu/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 :)

Senin, 07 Juni 2010

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

Senin, 31 Mei 2010

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

Jumat, 28 Mei 2010

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

Kamis, 20 Mei 2010

Blogger Template: Today's News dan Diadema

Today's News Blogger Template



Today's News Blogger Template merupakan hasil konversi Wordpress ke Blogger
yang baru saja saya buat tadi malam, Hadir dengankonsep desain nan elegan
dan cool abis ini bisa membuat rekan sobat iri hehehehe. Template Ini sangat
cocok buat blog atau situs dengan konsep berita. Ok jadilah orang pertama
yang mencobanya :)





Demo |

Download


 




Features:



  • Options Page

  • Post Thumbnails

  • Featured Content

  • 125×125 banners ready (easy editable from admin options)

  • 468×60 Header Banner ready (easy editable from admin options)

  • Three columns

  • Gravatar on Comments

  • Compatible with latest WordPress versions

  • Widgets Ready

  • SEO Optimized

  • Fixed width

  • Tested and compatible with all major browsers: IE, FF, Safari



 


Diadema Blogger Template


Hampir Sama dengan Today's News, template Diadema hadir dengan konsep yang
sangat menawan dengan desain yang mengagumkan. kalau rekan pecinta Fashion
template ini jangan sampai dilewatkan :)






Demo |

Download


 


Features:



  • Options Page

  • Post Thumbnails

  • Featured Content

  • 125×125 banners ready (easy editable from admin options)

  • Two columns

  • Gravatar on Comments

  • Compatible with latest WordPress versions

  • Widgets Ready

  • SEO Optimized

  • Fixed width

  • Tested and compatible with all major browsers: IE, FF, Safari