Sunday, October 21, 2018

Data Tag Blogger Advance Level Beserta Fungsinya, Wajib Tahu!

    Beberapa Data Tag Blogger Advance Level Yang Perlu Kamu Ketahui Untuk Kostum Template Lebih Baik

    Blogger merupakan platform Blogging dari Google yang menjadi salah satu platform blog terpopuler selain Wordpress. 

    Platform ini sepenuhnya gratis dan sangat mudah digunakan. Anda tidak perlu mempunyai keahlian coding ataupun pengetahuan mengenai server. Cukup membuat blog gratis menggunakan akun Google, maka anda blog pribadi anda sudah dapat digunakan. 

    Tapi seiring berjalannya waktu, mungkin anda juga harus memiliki sedikit pengetahuan mengenai coding, setidaknya HTML dan CSS tingkat dasar. Hal ini berguna nantinya agar anda bisa kostumisasi tampilan blog anda menggunakan pengetahuan tersebut.

    Bagi anda pengguna Blogger.com yang sudah memiliki pengetahuan tentang coding, mungkin sudah tidak asing dengan yang namanya data tag XML di Blogger seperti data:post.body , data:Blog.homepageURL , data.blog.PageName , dan lainnya. 

    Beberapa kode tag di Blogger tersebut digunakan untuk memanggil element tertentu yang ada pada Blogger. 

    Misalkan data:blog.title yang digunakan untuk memanggil judul dari Blog yang sudah anda setting di dashboard Blogger. Atau tag data:post.body yang merupakan tag untuk memanggil content utama dari sebuah artikel atau halaman.
    Biasanya tag data Blogger di atas sudah pasti ada pada template default yang anda pilih ketika membuat blog di Blogger.com.

    Tapi untuk meng-kostum Blogger anda menjadi lebih bagus, saya rasa anda harus mengetahui beberapa tag data Blogger tingkat lanjutan (Advance Level) yang mungkin belum pernah anda gunakan sebelumnya. 

    Misalnya, anda ingin membuat 2 style template yang berbeda namun dalam 1 domain blog, dan pengguna bisa memilih template tersebut. Anda bisa memanfaatkan tag data dengan tag conditional. 

    Disini saya hanya akan menampilkan penulisan tag data secara singkat beserta fungsinya saja. Untuk cara penggunaanya lanjutan, akan saya jelaskan pada artikel selanjutnya. Untuk itu, silahkan subscribe feed saya dengan mengisi kolom subscribe di bawah atau follow blog ini.

    Data Operator URL

    Data blogger yang bisa digunakan pada sebuah URL. Tag Data Operator URL ini berfungsi untuk mengubah, menambah atau menghapus sebuah bagian dari URL Blogger. Ada beberapa atribut dan atau element yang bisa diterapkan. Saya akan jelaskan:

    1. Operator URL Params

    Fungsi dari tag data ini untuk menambahkan parameter pada URL. Objek untuk beberapa penambahan parameter terbatas.

    Contoh penulisan: 

    <a expr:href='data:view.url params { template: "dark" }'> Dark Version </a>

    Hasil:

    <a href='https://alamat.com/?template=dark'>Dark Version</a>

    2. Operator URL Path

    Digunakan untuk merubah atau membuat jalur URL.

    Contoh penulisan: 

    <a expr:href='data:view.URL path "/2030/09/lorem-ipsum.html"'> Text Link </a>

    Hasil:

    <a href='https://alamat.com/2030/09/lorem-ipsum.html"'> Text Link </a>

    3. Operator URL fragment

    Digunakan mengganti / merubah / menambah sebuah fragment atau hashtag (#) di akhir URL.

    Contoh penulisan:

    <a expr:href='data:view.url fragment "footer"'>
      Link text
    </a>

    Hasil:

    <a expr:href='https://alamat.com/category/label/lorem.html#footer'>
      Link text
    </a>

    4. Operator URL appendParams

    Digunakan mengganti semua parameter pada URL.

    Contoh penulisan:

    <a expr:href='data:view.url appendParams { hl: "en" }'>
      English
    </a>

    Hasil: 
    <a href='xxxxxxx/?hl=en'>
      English
    </a>

    *Yang bertanda merupakan URL aktif saat ini.


    Keterangan mengenai data Operator URL
    • Data Blogger Operator URL ini hanya bisa diterapkan pada sebuah link / URL
    • Bisa ditempatkan pad tag link <a> dengan :expr dan juga menggunakan tag conditional blogger.
      Contoh:
      <b:if cond='data:view.url == data:view.url params { amp: &quot;1&quot; }'>
      <!-- element content-->
      </b:if>
    • Bisa digunakan untuk b:attr dengan penggunaan terbatas.

    Data Tag Article Snippet

    Beberapa data di bawah ini digunakan untuk memanggil  rangkuman dari sebuah artikel utama, biasanya digunakan pada halaman homepage maupun widget. 

    Data tag data:post.snippet mungkin sudah banyak yang mengetahui. Bahkan hampir semua template Blogger sudah menggunakannya. Namun ada beberapa atribut yang bisa dikembangkan untuk kostum snippet artikel. 

    data:post.snippet

    Digunakan pada popular post widget, namun bisa diakali dengan menempatkan ditempat lainnya.

    Penerapan:

    <div class="...">
    <data:post.snippet/>
    </div>


    Keterangan: 
    • Minimal widget dan layout versi 1
    • Maksimal 140 karakter yang bisa disematkan.
    Jika ingin mengurangi karakter, bisa menggunakan data XML b:eval seperti contoh di bawah ini.

    <div class="...">
    <b:eval expr='snippet(data:post.snippet, {length: 120})'/>
    </div>

    data:post.longSnippet

    Data tag snippet ini digunakan untuk membuat ringkasan artikel yang panjang

    Contoh penulisan:

    <div class="...">
    <data:post.longSnippet/>
    </div>

    Keterangan:
    • Minimal widget dan layout versi 1
    • Maksimal 1000 karakter yang bisa disematkan dan tidak bisa ditambah.
    Jika ingin mengurangi karakter, bisa menggunakan data XML b:eval seperti contoh di bawah ini.

    <div class="...">
    <b:eval expr='snippet(data:post.longSnippet, {length: 1000})'/>
    </div>

    data:posts.snippets.short

    Data tag snippet ini digunakan untuk membuat ringkasan artikel yang pendek.

    Contoh penulisan:

    <div class="...">
    <data:post.snippets.short/>
    </div>

    Keterangan:
    • Minimal widget Versi 2
    • Minimal layout Versi 3
    • Maksimal karakter 100, tidak bisa ditambah
    • Minimal karakter terserah anda
    Jika ingin mengurangi karakter, bisa menggunakan data XML b:eval seperti contoh di bawah ini.

    <div class="...">
      <b:eval expr='snippet(data:posts.snippets.short, {length: 100})'/>
    </div>

    Bersambung... Cooming Soon
    ---------------------------------------------------------------------
    Sementara bisa dilanjutkan di kolom komentar terlebih dahu
    ---------------------------------------------------------------------

    Nah itulah Data Tag Blogger Advance Level Beserta Fungsinya, yang bisa anda terapkan di template XML Bogger anda. Saya memahami kurang jelasnya apa yang saya sampaikan, saya akan segera mengupdate secara lengkap mengenai template data tag Blogger tersebut.

    Semoga bermanfaat.

    Disqus Comments