XPW3 - Hanya Blogging Biasa

Cara Menambah Elemen Footer Blog  - Untuk memperbanyak elemen di bawah footer ini tujuannya supaya bisa menambah widget-widget baru. Dengan cara ini blog akan terasa lebih banyak konten yang bisa ditambahkan. Mungkin ada sobat yang sedang ingin menambahkan elemen baru pada footernya, semoga tutorial ini cukup membantu. Langsung saja tutorialnya step by step :

• Login ke blog sobat
• Pilih Template
• Klik Edit HTML
• Silahkan copy code di bawah ini , kemudian langsung diletakkan di atas    ]]></b:skin>  

• Kemudian sobat blogger cari code seperti di bawah ini ( gunakan Ctrl+F atau F3 untuk mempermudah mencari ) 

            <!-- end outer-wrapper -->

           Memang setiap template tidaklah sama, tapi sobat bisa berpatokan dari kata outer  ataupun footer tersebut, tempat ane sendiri lansung ane cari kode "id='footer' " yang kebetulan berada di copyright nya

•         Setelah ketemu sobat letakkan script di bawah ini tepat di bawah outer wrapper tersebut.(menambahkan 3 column baru)

• Kemudian simpan template. Sekian

Cara Membuat Related Post di Blog Blospot -Pagi ini saya akan membagikan script untuk membuat related post / artikel terkait. Akhirnya menemukan juga tutorial ini, karena banyak tutorial yang lain javascript-nya disisipkan sebuah link. jadi yang ini sama sekali tidak ada link yang disisipkan.



Cara Membuat Related Post di Blospot
1. Dashboard → Template → Edit HTML.
2. Temukan kode [ctrl+F] </head>
3. Paste kode di bawah ini sebelum kode </head>
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 10px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 15px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 10px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

4. Sekarang Temukan kode [gunakan: Ctrl+F] <data:post.body/>
5. Paste the kode di bawah ini setelahnya. Jika ada lebih dari satu <data:post.body/>, gunakan yang kedua.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>

6.Simpan template
 


Source : http://contohblognih.blogspot.com/

 
Jika sobat menggunakan template kustom, masuk di tab TEMPLATE di dashboard-mu dan klik pada icon gear di template Seluler. Selanjutnya pilih yang paling bawah, yaitu KHUSUS.



Nanti template-mu tidak akan sama tampilannya dengan tampilan di dekstop.
Kalau memiliki widget di blog-mu ada, sobat dapat mengatur hanya dengan menambahkan property di dalam tag <b:widget/>

Sebagai contah, jika sobat ingin menampilkan widget Popular Post di template seluler, maka pertama tentunya sobat harus menambahkan widget tersebut melalui menu edit tata letak.

Kurang lebih kode widget Popular Post di dalam template sobat adalah seperti ini :


    <b:widget id='PopularPosts3' locked='false' title='Entri Populer' type='PopularPosts'>

Untuk menampilkannya di template seluler, sobat perlu menambahkan property baru pada tag widget tersebut, yaitu mobile. Property mobile ini sendiri memiliki tiga nilai, yaitu Yes, No, dan Only. Dan seperti inilah penerapannya :


    <b:widget id='PopularPosts3' mobile='yes' locked='false' title='Entri Populer' type='PopularPosts'>


Kode di atas adalah contoh untuk menampilkan widget popular post di template seluler dan juga tampil di tampilan versi desktop. Dan jika ingin membuat widget popular post hanya tampil di template versi seluler, maka kodenya adalah seperti ini :


    <b:widget id='PopularPosts3' mobile='only' locked='false' title='Entri Populer' type='PopularPosts'>


Atau menyembunyikan widget pada tamplate versi seluler, maka kodenya adalah seperti ini :



    <b:widget id='PopularPosts3' mobile='no' locked='false' title='Entri Populer' type='PopularPosts'>


Selain dengan cara di atas, kita juga bisa menampilkan widget atau elemen khusus pada template versi seluler dengan menggunakan tag condition. Tag condition tersebut adalah seperti ini :


    <b:if cond='data:blog.isMobile'>
    Elemen yang akan tampil di template seluler
    </b:if>


Tag tersebut akan menampilkan sebuah elemen hanya pada template seluler.

Cara Mendaftar Google Analytics dan Memasang Kode di Blog  -
agar terintegrasi dengan webmaster tools yang akan memberikan laporan semua informasi data statistik blog anda. Kita langgung saja ke tutorial cara mendaftar google analytics dan memasang kode diblog anda.

Cara Mendaftar Google Analytics Universal

• Kunjungi Halaman Googel Analiytics
• Setelah berada pada halaman google analytics, klik link MASUK di kanan atas.
• Klik PENDAFTARAN untuk membuat akun analytics baru.

• Setelah anda masuk lengkapi formulir pendaftaran
• Pastikan opsi yang anda pilih adalah WEBSITE bukan APLIKASI
• Geser kebagian bawah anda akan memilih opsi dari google analytics dan pastikan pilih yang UNIVERSAL ANALYTICS karena fiturnya lengkap dan sama gratisan.

•  Selanjutnya klik setuju pada PRIVACY POLICE 

• Setelah anda klik SETUJU, anda akan dibawa kehalaman akun anda, dan akan ada kode analytics yang anda harus pasang pada blog anda.
• Silahkan copy kode tersebut

Memasang ID Tracking Google analytics pada blog anda

• Masuk pada akun blogger anda
• Pilih menu TEMPLATE
• Pilih EDIT TEMPLATE
• Copy paste kode analytics-nya dan simpan dibawah kode <body> atau diatas kode </body>
• Simpan Perubahan

Untuk pengguna template default, silahkan login ke dashboard blogger > klik menu Setelan > pilih Lainnya:






Scrool ke bawah, di bagian Google Analytics, isi kolom ID Properti Web Analytics dengan ID Pelacakan yang tadi anda copy, seperti contoh berikut:

Sitemap atau Peta Situs adalah sebuah cara yang cukup efektif untuk memberitahukan pada mesin pencari (search engine) tentang semua halaman yag ada di website anda. Pada dasarnya file sitemap adalah file yang berisi daftar setiap halaman di website anda. Kalau menurut saya juga berperan penting untuk ketenaran blog kita, jika pengunjung yang melihat daftar isi blog kita dan mengeklik artikel kita yang lain otomatis akan tambah pageview nya, pageview yang banyak di setiap hari nya itu termasuk hal yang sangat bagus, apabila anda menggeluti dunia bisnis di suatu PPC sebagai publisher, tidak mustahil jika setiap pengunjung akan mengeklik iklan yang anda pasang di blog anda. Bagaimana Cara Membuat Sitemap ? Baiklah langsung saja ikuti petunjuk berikut :

• Pertama, seperti Cara Membuat Sitemap yang kemaren, Buka dashboard dan klik Entri Baru seperti kita mau bikin artikel atau postingan baru.
• Lalu klik HTML bukan Compose.
• Copy paste kode dibawah ini.  

<script src="//dl.dropboxusercontent.com/u/7922863/this%20is/thisis.js"></script>
<script alt="Sitemap" src="http://xpw3.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
 

• Untuk yang berwarna hijau tersebut sobat ganti dengan url blog sobat.

•  Kemudian PUBLISH.

Mudah bukan, demikianm Cara Membuat Sitemap atau Daftar isi kali ini. Semoga bermafaat.

Postingan pertama kali ini, saya akan memberikan tutorial Cara Membuat Readmore Hanya Judul Saja. Memasang readmore pada blog biasanya disertai juga dengan gambar. Tetapi kali ini hanya menampilkan judulnya saja supaya terlihat lebih simpel. langsung saja, inilah langkah-langkahnya :


1. Login ke akun blogger sobat.
2. Klik rancangan --> edit HTML
3. Letakkan kode berikut di bawah kode ]]</b:skin>


<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

4. Simpan dan lihat hasilnya.

Tambahan :
Jika setelah menggunakan kode di atas dan masih menyisahkan elemen - elemen seperti tanggal posting, jumlah komentar dll, silahkan gunakan kode berikut menggantikan kode no 3.


<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

Semoga bermanfaat