BELAJAR DAN BERBAGI: BLOG

Tampilkan postingan dengan label BLOG. Tampilkan semua postingan

CARA MUDAH MEMBUAT NAVIGASI HALAMAN BLOG

Seringkali saya mampir di blog-blog lain. Dan tak jarang saya perhatikan terdapat navigasi halaman di bagian bawah halaman blognya. Lalu saya pun berpikir tidak ada salahnya kalau saya memasang navigasi halaman di blog saya. Biar semakin betah tuh mereka yang berkunjung ke blog saya, he he. Mereka bisa membuka halaman blog saya satu per satu cukup dengan mengklik navigasi halaman.

Lalu saya mulai mencari-cari cara untuk memasang navigasi halaman blog. Tentunya yang saya cari adalah alternatif yang paling mudah dan yang paling menarik. Akhirnya proses pencarian pun selesai. Navigasi halaman mulai saya pasang di blog saya. Bentuknya seperti ini :

Kelebihan dari navigasi halaman ini, panah di bagian bawah bisa digeser-geser ke arah halaman mana pun.

Cara memasangnya gampang :

Login ke dashboard blog
Klik rancangan halaman > edit html
Centang expand widget templates
Cari kode ini ]]></b:skin> lalu hapus dan ganti dengan kode berikut :

.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje_n7HM188eyLv03Pwirs_zObNN3w7RflKb5XJ9Ii3PIt1qsaFFOi2i7q6-OFsW0Nwr7ISgjr6X1Sm-moUcDo2RV27PpGFfdLYQ4w_sVTCzK0ozODqnhOb6qP4B5UfRfYYf2guKNvOaEE/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}

.fullsize .scroll_thumb {
display:none;
}

.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
]]></b:skin>

Selanjutnya cari kode </body> lalu hapus dan ganti dengan kode berikut :

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>

<script type='text/javascript'>

var home_page="/";

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=6;

</script>

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

</body>

Note : var postperpage bisa dirubah-rubah tergantung mau berapa jumlah posting per halaman yang ingin ditampilkan. var numshowpage pun sama bisa dirubah-rubah tergantung mau berapa jumlah navigasi yang ingin ditampilkan.

Terakhir cari kode 'data:label.url' dan ganti dengan kode berikut : 'data:label.url + "?&max-results=7"'

Note : angka 7 harus sama dengan angka di var postperpage

Simpan template & selesai

Setelah cukup lama menekuni hobby 'ngeblog', saya mulai berpikir bagaimana caranya agar siapa pun yang mampir di blog saya tidak hanya berhenti untuk membaca satu posting saja. Karena banyak posting-posting yang satu sama lain saling berkaitan. Artinya, ia akan cukup lama mampir di blog saya (tidak keluar masuk begitu saja), he he ..

Boleh kan?

Ada pun cara yang saya lakukan untuk mewujudkan keinginan saya itu adalah dengan memasang artikel terkait/related post di bawah setiap posting di blog saya. Ingin tahu dan mencobanya? Ikuti deh langkah-langkah berikut ini :

Masuk ke dashboard blog > rancangan > edit html > centang expand template widget cari kode ]]></b:skin> (gunakan ctrl f untuk pencariannya biar gampang)
Copy paste kode berikut tepat di atas kode ]]></b:skin> :

/* Related Post */

.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#EEEEEE;}

.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;}

.related_posts a{color:#000;}

.related_posts ul{padding:0;}

.related_posts ul li{list-style:none;padding:4px 5px 4px 17px;border-bottom:1px solid #f9f9f9;line-height:18px;background: #EEEEEE;}

Setelah itu lalu cari kode <div class=’post-footer-line post-footer-line-1'> dan letakkan kode berikut tepat di bawahnya :

<b:if cond='data:blog.pageType == "item"'>

<h4>Artikel Terkait</h4>

var homeUrl3 = "<data:blog.homepageUrl/>";

var maxNumberOfPostsPerLabel = 10;

var maxNumberOfLabels = 2;

maxNumberOfPostsPerLabel = 10;

maxNumberOfLabels = 2;

function listEntries10(json) {

var ul = document.createElement('ul');

var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i < maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

alturl = entry.link[k].href;

break;

}

var li = document.createElement('li');

var a = document.createElement('a');

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

for (var l = 0; l < json.feed.link.length; l++) {

if (json.feed.link[l].rel == 'alternate') {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k<20; k++) label = label.replace("%20", " ");

var txt = document.createTextNode(label);

var h = document.createElement('b');

h.appendChild(txt);

var div1 = document.createElement('div');

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById('data2007').appendChild(div1);

}

function search10(query, label) {

var script = document.createElement('script');

script.setAttribute('src', query + 'feeds/posts/default/-/'

+ label +

'?alt=json-in-script&callback=listEntries10');

script.setAttribute('type', 'text/javascript');

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

textLabel = "<data:label.name/>";

var test = 0;

for (var i = 0; i < labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length <= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

</b:loop>

</script>

</div>

</b:if>

Simpan Tempale

Dulu, setelah cukup banyak posting di blog saya, saya jadi penasaran, sebenarnya sudah seberapa banyak orang sih yang sudah mampir untuk membaca posting-posting di blog saya? Lalu saya pun memasang gadget statistik blog yang sudah disediakan si empunya blog. Lumayan ternyata sudah banyak juga, he he.

Tapi beberapa waktu kemudian, saya jadi penasaran juga untuk mengetahui dari mana saja asal pengunjung yang mampir di blog saya. Lalu saya pun memasang feedjit free live traffic feed di blog saya. Wuih, ternyata ada juga yang berasal dari luar negeri : Singapura, India, dst. Bangga sekali rasanya. Ternyata berbagi ilmu, walaupun sedikit, kalau diniati tanpa pamrih, membuat diri ini luar biasa bahagianya.

Memasang feedjit free live traffic feed sangat gampang :

PERTAMA, masuk ke eleman laman di rancangan dashboard blog

KEDUA, klik tambah gadget

KETIGA, cari dan klik html java scrift

KEEMPAT, masukkan kode berikut :

KELIMA, simpan dan lihat hasilnya. (Angka 220 dan 7 yang diwarnai biru, adalah angka ukuran lebar dan jumlah pengunjung yang ditampilkan. Keduanya bisa dirubah-rubah)

Sebenarnya, blog menyediakan fasilitas gadget untuk sharing posting ke berbagai media sosial. Hanya saja, tampilannya terlalu sederhana alias kurang enak dilihat.

Seperti yang sudah saya katakan di posting-posting sebelumnya bahwa saya termasuk seorang bloger pemula yang otomatis punya hobby ngotak-ngatik blog di waktu-waktu luang saya, termasuk ngotak-ngatik tampilan social button di blog saya.

Setelah berkonsultasi dengan paman google, akhirnya saya temukan tampilan media sosial share button yang saya suka (tampil melayang di kanan bawah blog). Seperti ini tampilannya :

Caranya sederhana :

Masuk elemen laman di dashboard blog
Klik tambah gadget lalu klik html java scrift
Di html java scrift masukkan kode berikut :

<style>

#pageshare {position:fixed; bottom:10%; right:8px; float:left; border: 1px solid white; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>

<div class='sbutton' id='fb'><a name="Bagikan Ke Teman Anda" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"></div>

</div>

Simpan

Sebagai salah seorang anak bangsa yang hobby ngeblog, saya selalu meluangkan waktu untuk memodifikasi blog saya.

Salah satunya adalah dengan memodifikasi kursor dengan memberinya efek bintang. Asyik sekali, ke arah mana pun saya geser kursor, efek bintang selalu mengikutinya.

Cara yang saya lakukan adalah sebagai berikut :

Masuk ke dashboard - rancangan - edit html - checklist expand template widget
Mencari kode </body> (menggunakan ctrl f)
Lalu tepat di atas kode </body> saya letakkan kode berikut :

Saya ganti warna white dengan warna blue kesukaan saya
Simpan Template
Selesai

Sampai saat ini, di saat luang, saya masih suka ngutak-ngatik blog saya, biar kelihatan keren, biar orang asyik ngelihatnya, he he.

Saya masih ingat, pertama kali saya buat posting, saya sempat bingung. Karena isi postingnya tampil semua di halaman blog. Jadinya kepanjangan dech. Padahal sempat saya perhatikan di blog-blog yang lain tampilannya tidak seperti itu, karena postingannya suka dipotong dengan read more atau baca selengkapnya, dan seterusnya.

Lalu saya pun melakukan googling sampai akhirnya menemukan caranya.

Ternyata caranya gampang. Yang saya lakukan adalah :

Masuk ke dashboard - rancangan - edit html - checklist expand template widget
Mencari kode </head> (gunakan ctrl f)
Lalu tepat di atasnya saya letakkan kode berikut : <script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script><script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Mencari kode <data:post.body/> lalu menghapusnya dan menggantinya dengan kode berikut : <b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>BACA SELENGKAPNYA - </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

SIMPAN TEMPLATE - SELESAI

Sama seperti saya, pasti ada di antara teman-teman yang lagi belajar ngeblog kan? Ngeblog memang sangat mengasyikan, sampai bisa bikin lupa waktu, he he. Masih sama seperti saya juga, pasti teman-teman penasaran ingin tahu, sebenarnya posting mana di blog kita yang paling banyak dikunjungi kan?

Untuk itu, yang harus teman-teman lakukan pertama kali adalah masuk ke elemen laman di dashboard blog teman-teman. Setelah itu tambah gadget. Pilih entri populer. Teman-teman bisa merubah jumlah entri postingannya sesuai keinginan teman -teman. Lalu simpan. Silakan teman-teman perhatikan, di blog teman-teman pasti sudah tampil gadget entri populer/popular posts . (untuk posisinya, teman-teman bisa geser-geser di menu elemen laman blog teman-teman)

Coba perhatikan screenshot berikut :

Setelah semua langkah di atas selesai teman-teman lakukan, selanjutnya silakan lakukan langkah berikut :

Masuk ke menu edit html (di sebelah elemen laman)
Cheklist expand template widget
Cari <div class='widget-content popular-posts'>
<ul> gunakan ctrl f untuk menemukannya (cukup dengan mengetik popula-post)
Copykan kode berikut <marquee align='left' direction='up' height='250' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> tepat di bawah <ul>
Setelah itu geser perlahan kursor ke arah bawah dan cari kode berikut <div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul> copykan kode </marquee> tepat di samping kiri kode </ul>
Simpan template

Silakan perhatikan entri populer/popular posts blog teman-teman. Kalau tadi posisinya diam, sekarang jadi bergerak dari bawah ke atas kan? Selesai dech.

BELAJAR DAN BERBAGI

CARA MUDAH MEMBUAT NAVIGASI HALAMAN BLOG

MEMBUAT ARTIKEL TERKAIT DI POSTING BLOG

CARA MENGETAHUI DARI MANA ASAL PENGUNJUNG BLOG MENGGUNAKAN FEEDJIT

MEMBUAT SHARE BUTTON MELAYANG DI BLOG

MEMODIFIKASI KURSOR BLOG DENGAN MEMBERI EFEK BINTANG

MEMASANG AUTO READ MORE DI POSTING BLOG

MEMODIFIKASI ENTRI POPULER / POPULAR POSTS BLOG AGAR BERGERAK

Label

Entri Populer