Tampilkan postingan dengan label tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial. Tampilkan semua postingan
Cara Pasang Nomor Halaman Navigasi
Pada umumnya dibawah Postingan Blog ada Link Previous - Home - Next dan ada juga yang berupa Image / Tanda atau memakai Nomor [angka] yang fungsinya tak perlu saya jelaskan karena semua kawan Blogger sudah mengetahuinya, tapi sekarang yang akan saya bahas adalah Cara Pasang Nomor Halaman Navigasi yang bahasanya mbah Google kurang lebih adalah Numbered Page Navigation, contohnya bisa kawan lihat di Blog saya ini :z;
Cara Pasangnya sebagai berikut :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
- Copas script berikut kedalamnya
<!-- Numbered Page Navigation Widget For Blogger oleh BlogBego @ http://blogbego-creation.blogspot.com -->
<style type='text/css'>
#blog-pager{
font-size:normal;
padding:10px 0;
clear:both;
}
.showpageArea{
font-family:verdana,arial,helvetica;
color:#000;
font-size:11px;
margin:10px;
}
.showpageArea a{
color:#fff;
}
.showpageNum a{
padding:3px 8px;
margin:0 1px;
text-decoration:none;
background:#FFF;
border: 1px solid #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius:3px;
}
.showpageNum a:hover{
background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 );
border: 1px solid #333; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius:3px;
}
.showpagePoint{
color:#fff;
padding: 4px 8px;
margin: 0 5px;
font-weight:700;
background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 );
text-decoration:none;
border: 2px solid #F00; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;
}
.showpageOf{
background:#95CAFF;
border: 1px solid #333; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius:3px;
margin: 0 5px 0 0;
padding:3px 8px;
}
</style>
<script style='text/javascript'>
var numshowpage=4;
var postperpage =5;
var upPageWord="Previous";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/blogbego_pnavi.js' style='text/javascript'/>
<!-- Numbered Page Navigation Widget For Blogger oleh BlogBego @ http://blogbego-creation.blogspot.com -->
Kalau kawan ingin menyimpannya di Template
Caranya sebagai berikut :
- Pada Dasbor pilih Template
- Beri tanda check disamping
- Cari <b:includable id='shareButtons' var='post'> atau <data:homeMsg/> yang pertama sebelum </b:includable> selengkapnya kurang lebih sebagai berikut :
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
SIMPAN DISINI SCRIPTNYA
</b:includable>
<b:includable id='shareButtons' var='post'>
Simpan Template kawan
Mengganti Image di Home Page dengan.....
Kalau Blognya kawan ingin tampil beda dengan Blogger yang lainnya atau kawan ingin Blognya seperti Blog saya ini :w; maksud saya disini setiap Artikel atau postingan ada Imagenya baik pada Home Page maupun pada Single Page :z; yang pada umumnya saya lihat sudah biasa, tapi sekarang saya ingin berbagi dengan kawan sebagai pengunjung setia Blog ini yaitu Image pada Postingan di Home Page diganti dengan jumlah Komentar yang ada pada Artikel tersebut atau dengan kata lain Image tersebut hanya kelihatan pada Single Page saja sedangan di Home Page tidak ada karena sudah diganti dengan Jumlah Komentar :z;
Bagaimana kawan tertarik ?! :r;
Cara sebagai berikut :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor Pilih Template - Edit HTML - Lanjutkan
- Cari ]]></b:skin> atau .comment-link
- Copas script berikut diatas ]]></b:skin> atau ganti .comment-link dengan script dibawah ini
.comment-link{color:#122B15;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMK6VXXJqb6MzKKFK89fLmyIII9p_qUefebou5cw1Pua9A9nc0r0g5IuXM4B4BANLPIjf3y-N6PwCdxOH8sd756cKmozO8z8XKBdzFGuY4CoX7mWprVP5NRNu0NRfXeiBVr0lOwPbU08Bo/s1600/Komentar-.png) no-repeat;
width:30px;
height:30px;
float: left;
margin: 5px;
padding:5px 14px 10px 5px;
font-size:12px;
text-align:right;
}
- Selanjutnya cari kode script Readmore yang biasanya disimpan dibawah ]]></b:skin> atau diatas </head>, perhatikan contoh Readmore
- Teks yang saya beri warna merah adalah ukuran Image pada Home Page, yang akan kawan rubah dari 100 menjadi 0 [nol]
- Simpan sementara Template kawan
- Beri tanda check disamping Expand Template Widget
- Cari <data:post.body/> yang pertama
- Copas Script berikut diatasnya
<b:if cond='data:blog.pageType != "item"'>
<div style='float:left;text-align:center;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> </b:if></a>
</b:if>
</div>
</b:if>
- Simpan Template kawan dan lihat hasilnya
Tampilkan Judul saja dari Katagori
Sudah banyak para Blogger memposting Klik Label yang Tampil hanya Judulnya saja :y; bagi saya [secara pribadi] tampilan tersebut biasanya mepet pada sisi kiri Blog tanpa ada sentuhan Kreasi dari pemilik atau Admin Blog tersebut :w; yang pada prinsip dasarnya mengganti <b:include data='post' name='post'/> dengan beberapa kode script seperti berikut :
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Untuk Demo kawan bisa Klik salah satu Katagori pada Menu-Tab Blog saya ini :r;
Itulah yang akan saya bahas sekarang, dari tampilan biasa-biasa saja, akan saya tambahkan sedikit Kreasi supaya kelihatan lebih keren, :z; Oke kawan langsung saja ke Caranya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor Pilih Template - Edit HTML - Lanjutkan
- Beri tanda Check disamping Expand Template Widget
- Cari dengan Ctrl+F <b:include data='post' name='post'/> Kalau pada Template saya ada 2 saya pakai yang ke-2 [silahkan kawan mencoba salah satunya]
- Ganti / Hapus Kode tersebut dengan Script berikut
<b:if cond='data:blog.homepageUrl != data:blog.url'>Sedikit Penjelasan :
<b:if cond='data:blog.pageType != "item"'>
<div style='float:left; width: 90%; padding: 5px 20px;margin: 2px 15px; text-shadow: 2px 2px 2px #FFF; font-size: 16px; text-decoration: none; line-height:normal; border:1px solid #FFF;-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px; background:-moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#95CAFF),to(#FFF)); '>
<a expr:href='data:post.url' style='text-decoration:none;'>
<data:post.title/></a>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if> <b:else/>
<b:include data='post' name='post'/>
</b:if>
- Teks yang saya beri warna merah width: 90%; silahkan kawan ganti sesuai kebutuhan
- Kalau Halaman Posting Blog kawan lebarnya sama seperti Blog saya ini [980px] dan ingin tampilannya berdampingan, caranya kawan cukup mengganti width: 90%; menjadi width: 40%;_40%;
- Jangan lupa simpan Template kawan
Cara Pasang Tombol Berbagi Plus Pinterest
Postingan saya sekarang ini tentang Tombol Berbagi untuk Jejaring Sosial seperti Twitter, Facebook, G+ dan Pinterest yang paling anyar di dunia Blogger. :r; sepengetahuan saya kalau Thema / Template di WordPress kita tinggal memberikan tanda check disamping yang ingin ditampilkan dan secara otomatis akan tampil, sungguh sangat berbeda dengan di Blogspot karena yang ada share button default [artinya hanya ada khusus untuk Blogspot saja] sedangkan untuk yang lainnya kalau kita ingin menampilkan diperlukan kode / scriptnya yang ingin kita tampilkan.
Cara Pemasangan Tombol Berbagi sebagai berikut :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor Pilih Template - Edit HTML - Lanjutkan
- Beri Tanda Check disampaing Expand Template Widget
- Cari <data:post.body/>
- Simpan Script berikut dibawah atau diatas <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<!-- Scripts Button Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</b:if>
<!-- Scripts Button End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='display: inline;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
</b:if>
Catatan :
- Kalau kawan ingin menempatkan dibawah <data:post.body/> biasanya ada 2 [sebelum template di tambahkan Readmore otomatis] pilih <data:post.body/> yang pertama
- Kalau Template memakai Readmore otomatis <data:post.body/> yang pertama bisa menjadi 3 atau selebihnya, silahkan pakai yang terakhir atau bisa dibawahnya lagi, misalnya pada <div class='post-footer'> silahkan kawan menentukannya :w
- Kalau kawan ingin menampilkan di bawah Judul Posting, simpan Script tersebut diatas <data:post.body/>
- Simpan Template kawan
Masalah dan Solusi Membagi Halaman
Kawan masih ingat Artikel saya tentang Cara Membagi Halaman Posting di Home Page :z yang tampilannya seperti pada Blog saya, kalau tampilannya tidak mau seperti yang kita harapan di karenakan ada masalah seperti halaman posting berjejer kebawah atau Blog-Page [yang biasanya ada dibawah Post Artikel] naik keatas berada disamping / ditutupi oleh halaman posting :y;
Sekarang saya akan berbagi dengan kawan berupa Solusi cara mengatasi masalah tersebut :w; lengkap dengan contohnya
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Masalah yang ada :
Halaman posting setelah dibagi, tampilannya berjejer kebawah
- Cara mengatasi : Perhatikan image dibawah yang saya kurung dengan garis merah, untuk width [lebar] kedua ukurannya diperkecil :q;
- Ingat itu script untuk membagi halaman posting di Home Page
Blog-Page naik keatas sejajar dan ditutupi oleh Halaman Posting
- Cara Mengatasi : Perhatikan image dibawah yang saya kurung dengan garis merah
- Blog-Page biasanya terletak setelah Post-Comment sebelum ]]></b:skin>
- Kalau sudah ketemu script tersebut Hapus dan Ganti dengan
#blog-pager-newer-link {
float: left;
line-height: 1em;
font-weight: 700;
margin: 0;
}
#blog-pager-older-link {
float: right;
line-height: 1em;
font-weight: 700;
margin: 0;
}
#blog-pager {
color: #2C64B4;
margin: 0 auto 0;
height: 25px;
line-height: 1.8em;
font-weight: 700;
text-align: center;
background: transparent;
padding: 5px 5px 20px 5px;
font-family:'Arial',sans serif;
width: 98.5%;
float: left;
}
- Jangan lupa simpan Template kawan
Cara Membagi Halaman Posting di Home Page
Seperti pesan saya sebelumnya, jangan ikuti kejelekan saya [gonta-ganti Template] karena di search Engine :w; sangat jelek, sedangkan disatu sisi rasa puas khususnya saya secara pribadi tidak pernah tercapai, apa kawan juga sama seperti saya ?! :i;
sekarang saya berikan solusi sebagai alternatif perubahan misalnya halaman posting di Home Page kita bagi menjadi dua bagian, :y; inilah yang akan saya bahas dan berbagi dengan kawan, karena caranya sangat simple karena hanya menambahkan beberapa script tercapailah tujuan kita :q; seperti Blog saya ini Kalau aslinya Blog saya terdiri dua kolom [Sidebar dan Halaman Posting seperti pada Single-Page], bagaimana kawan berminat mencobanya.
Sebelum ke Cara Membuatnya, tolong perhatikan pesan saya ini yaitu :
- Template kawan sudah terpasang Read more Otomatis
- Perhatikan Lebar bagian Halaman Posting / Content / atau nama lainnya
Contoh Read more yang saya pakai :
<SCRIPT type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 200; summary_img = 150; img_thumb_height = 50; img_thumb_width = 50; </SCRIPT> <SCRIPT src='https://sites.google.com/site/blogbegocreation/javascript/readmore-otomatis.js' type='text/javascript'/>
Sekarang ke Cara membuatnya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Tem[late
- Backup / Download Template kawan dulu, untuk jaga-jaga seandainya ada kesalahan
- Cari ]]></b:skin> atau </head>
Copas script berikut dibawah ]]></b:skin> atau diatas </head>
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
.post {
width: 300px; _width:300px; /* for IE dont delete */
margin: 0 5px 5px 3px;
padding: 5px 5px 0 5px;
float:left;
background: #CEE3F6;
}
.post-body{
height:80px; *height:80px; /* for IE dont delete */
overflow:hidden;
line-height:16px;
*line-height:16px;
font: normal 12px Sans-Serif;
background: #FFF;
border: 1px solid #81BEF7;-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;
padding:5px;
}
</b:if>
</style>
width [lebar]: 300px dan height [ketinggian]: 80px silahkan disesuaikan dengan halaman Blog kawan
- Simpan Template kawan karena sampai disini sudah selesai :z;
Komentar FB dan Blog Gaya Buka-Tutup
Untuk mengatasi masalah ini diperlukan cara agar menjadi Kotak Komentar Buka-Tutup dan Berdampingan, seperti Tab Menu, Navigasi dan lain sebagainya :
Sebelumnya saya informasikan » bagi kawan yang sudah menerapkan Artikel saya sebelumnya tentang Cara Menampilkan Komentar FaceBook di Blog, sedangkan bagi kawan yang tidak, tapi sudah Menampilkan Komentar FB di Blognya dengan cara lain silahkan dicoba dan disesuaikan :x;
Caranya :
- Seperti biasa silahkan kawan masuk Account Blogger dengan ID masing-masing
- Beri tanda check
.comments-page {
background-color: transparent;
border: 1px solid #699AB8;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
width: 610px;
padding: 10px 15px;
}
#blogger-comments-page {
padding: 15px 10px 5px 20px;
display: none;
width: 610px;
border: 1px solid #699AB8;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}
.comments-tab {
float: left;
padding: 5px 10px;
margin-right: 10px;
cursor: pointer;
background-color: #699AB8;
border: 1px solid #FFF;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
color: #FFF;
text-shadow: 2px 2px 2px #F00;
font-size: 16px;
}
.comments-tab-icon {
height: 18px;
width: auto;
margin-right: 10px;
}
.comments-tab:hover {
background-color: #7CA9C0;
color: #FFF;
}
.inactive-select-tab {
background-color: #95CAFF;
color: #333;
text-shadow: none;
}
Selanjutnya cari <div class='comments' id='comments'>
Ganti semua script berikut :
<b:if cond='data:blog.pageType == "item"'><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxx&xfbml=1"></script><fb:comments expr:href='data:post.url' numposts='5' width='550'/></b:if>
dengan :
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='550'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
- Simpan Template kawan dan Selamat Berkreasi :z;
Cara Menampilkan Komentar FB di Blog
Perkembangan Dunia Maya [baca : Internet] sekarang ini sangat banyak sekali mengalami perubahan baik itu pada Blogspot, FaceBook maupun yang lainnya, :z; dan Artikel saya di Blog yang lain tentang Jawab Komentator Blog dari FB Gaya Punya dan Lebih jauh jawab Komentator Blog dari FB sudah ketinggalan alias tidak relevan lagi :r;
Sekarang saya akan berbagi dengan kawan Cara Menampilkan Komentar FaceBook di Blog :y;
Caranya
1. Membuat Aplikasi untuk Komentar di FaceBook
- Masuk dulu ke FaceBook kawan
- Pilih https://developers.facebook.com/setup
- Pilih Create New App kalau kawan belum pernah buat App
- Kalau kawan sudah pernah buat App maka akan langsung muncul Form, kawan tinggal memasukkan datanya saja sebagai contoh BLOG CREATION – Lanjutkan
- Berikutnya akan muncul verifikasi teks yang harus kawan masukkan – Kirim
- Kalau tidak ada kesalahan berarti kawan sudah berhasil membuat Aplikasi
- Copy ID App kawan dan simpan [Notepad]
2. Memasukkan Alamat Blog kawan ke dalam Aplikasi
· Masukkan alamat Email kawan
· Pada Select how your App integrates with Facebook pilih saja Website with Facebook Login dengan jalan meng-Klik tanda checklist disampingnya
· Pada Site URL masukkan alamat Blog kawan contoh http://blog-renovasi.blogspot.com/
· Simpan Perubahan
3. Cara Memasang Kode Developer FB di Blog
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor Pilih Template – Edit HTML
- Cari <html... simpan disini> kalau pada Template saya letaknya baris ke tiga dari atas atau simpan diatas <head> sebelum tanda penutup
- Sisipkan script ini xmlns:fb='http://www.facebook.com/2008/fbml' sebelum tanda penutup [simpan disini] hasilnya kurang lebih seperti ini
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'> <head>
- Selanjutnya kawan scroll kebawah [masih pada Template letaknya paling atas] sampai pada <b:skin><![CDATA[/*
- Simpan Script berikut tepat diatasnya
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='BLOG NAME' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='YOUR APP ID ' property='fb:app_id'/>
<meta content='YOUR ID FB PROFILE' property='fb:admins'/>
<meta content='article' property='og:type'/>
- Ganti semua teks yang berwarna merah dengan Nama Blog Kawan dan ID App yang disimpan pada Notepad tadi, sedangkan untuk Your ID FB Profile bisa didapat dengan Klik kanan pada Photo Profile FB kawan atau pada browse [jendela pencarian] ketik : https://graph.facebook.com/ Nama FB kawan maka akan muncul kode sebagai berikut:
{
"id": "10000063xxxxxxx",
"name": "Putu Blogbego",
"first_name": "Putu",
"last_name": "Blogbego",
"link": "http://www.facebook.com/Nama FB kawan",
"username": "Nama FB kawan",
"gender": "male",
"locale": "id_ID"
}
Ambil yang saya beri warna biru saja
- Selanjutnya Cari tag </head>
- Kalau sudah ketemu Copas script berikut tepat diatasnya
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR ID FB PROFIL' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
Ganti teks yang saya beri warna biru [YOUR ID FB PROFIL] dengan ID yang didapat tadi :x
- Selanjutnya cari tag <body>
- Copas kode berikut dibawahnya
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
<fb:comments/>
</script>
Ganti teks yang berwarna merah dengan App ID kawan yang disimpan pada Notepad tadi, Sampai disini simpan dulu Template kawan, karena seandainya ada kesalahan biar cepat bisa diperbaiki :z;
- Sekarang mari mulai lagi berpusing-ria, beri tanda centang disamping Expand Template Widget
- Cari kode <div class='comments' id='comments'> pada Template saya ada 2[dua] dan saya pakai yang pertama
- Copas kode berikut tepat dibawahnya
<b:if cond='data:blog.pageType == "item"'><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxx&xfbml=1"></script><fb:comments expr:href='data:post.url' numposts='5' width='550'/></b:if>
Ganti '550' sesuai dengan lebar Template kawan
- Simpan kembali Template kawan dan sampai disini berarti sudah selesai, selanjutnya silahkan kawan lihat hasilnya :y;
Cara Meng-Edit PagePeel
Artikel saya sebelumnya tentang Cara Membuat Pojok Blog Menggulung dan janji saya untuk peng-Editan yang diperlukan, :w; biar tidak kelamaan saya berjanji nanti kelupaan, untuk itu mari kita bahas tuntas apa saja yang perlu kawan edit, dan kenapa tampilannya bukan di pojok :x;
- Pertama yang perlu kawan siapkan 2 Gambar / Image dengan ukuran kurang lebih 500x500px dan simpan di Hosting penyimpanan atau bisa dimana saja untuk kawan ambil nanti Link Gambar kawan tersebut
 |
| Gambar - 1 |
 |
| Gambar - 2 |
- Perhatikan URL / Link Js
<script type='text/javascript'>var untuk ='http://Nama Blog kawan.blogspot.com/'</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/PagePeel.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/PagePeel.js' type='text/javascript'/>
- Copas URL / Link js yang saya beri warna biru pada browse pencarian, untuk kawan simpan pada Notepad atau tempat lainnya dengan Nama yang sesuai
- Edit file js tersebut yang isinya sebagai berikut :
var jaaspeel = new Object();
jaaspeel.ad_url = escape(untuk);
jaaspeel.small_path = 'http://www.digie.co.id/peel/small.swf';
jaaspeel.small_image = escape('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTl0kec3Iq42Qk_cWt-SYKcg0RkGHWPX67I2aCXP2OX-8Sif32JkvUOK1HBh-B47ZSrZghJn4I9c2RRime_MW_4NcuLiw7LIHdg0bVJcCil2k2QTuVb155NhrTz1TJjYTJeNr8Kg_ot7c/s1600/bali-.gif');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;
jaaspeel.big_path = 'http://www.digie.co.id/peel/large.swf';
jaaspeel.big_image = escape('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkPs7Eha1gQtIAAo7ZMift1D9Khgt4gft8mRnPZNMt4PT0hxv2WUVqVfLZ4SPwXQGd0mO6oDI5XJe7XpIvlUmtVoQw3aY58gJicN8_Sw3LIXJYEsW6TixFgo8A-4G6549soxRuQ_Tu0vE/s1600/BBC.png');
jaaspeel.big_width = '550';
jaaspeel.big_height = '550';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;
function sizeup987(){
document.getElementById('jcornerBig').style.top = '150px';
document.getElementById('jcornerSmall').style.top = '-1000px';
}
function sizedown987(){
document.getElementById("jcornerSmall").style.top = "150px";
document.getElementById("jcornerBig").style.top = "-1000px";
}
jaaspeel.putObjects = function () {
// <jcornerSmall>
document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:150px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerSmallObject" width="'+jaaspeel.small_width+'" height="'+jaaspeel.small_height+'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.small_path +'?'+ jaaspeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+jaaspeel.small_params+'"/>');
// embed
document.write('<embed src="'+ jaaspeel.small_path + '?' + jaaspeel.small_params +'" name="jcornerSmallObject" wmode="transparent" quality="high" width="'+ jaaspeel.small_width +'" height="'+ jaaspeel.small_height +'" flashvars="'+ jaaspeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
document.write('</script>');
// </jcornerSmall>
// <jcornerBig>
document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:150px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerBigObject" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.big_path +'?'+ jaaspeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ jaaspeel.big_params +'"/>');
// embed
document.write('<embed src="'+ jaaspeel.big_path + '?' + jaaspeel.big_params +'" id="jcornerBigEmbed" name="jcornerBigObject" wmode="transparent" quality="high" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'" flashvars="'+ jaaspeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
// </jcornerBig>
setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000);
}
jaaspeel.putObjects();
- Teks yang saya beri warna biru adalah Gambar - 1
- Teks yang saya beri warna violet adalah Gambar - 2
- Sedangkan Teks yang saya beri warna merah adalah posisi atas [150px dari atas], kalau kawan menginginkan agar betul-betul di pojok atas ganti 150px; menjadi 0px;
- Selanjutnya jangan lupa menyimpan perubahan tersebut :r;
- Yang terakhir simpan file js tersebut pada Hosting kawan, dan jangan lupa diambil Linknya untuk mengganti Link yang saya beri warna biru diatas
Selamat Berkreasi, mudah-mudahan kawan dapat menangkap apa yang saya maksudkan, karena saya juga bingung cara menyampaikannya biar singkat dan lugas :y;
Cara Membuat Pojok Blog Menggulung
Sudah banyak para Blogger membahas cara membuat Pojok Halaman Blog seperti Menggulung yang dalam bahasanya mbah Google dikatakan Pagepeel, disini saya akan berbagi dengan kawan yang saya beri judul Cara Buat Pojok Blog Menggulung :z;
- Masuk ke Account Blogger dengan ID kawan
- Pada Dasbor pilih Template
- Cari Tag ]]></b:skin>
- Copas Script berikut dibawah ]]></b:skin>
<script type='text/javascript'>var untuk ='http://Nama Blog kawan.blogspot.com/'</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/PagePeel.js' type='text/javascript'/>
- Ganti text yang berwarna merah [Nama Blog kawan] dengan URL blog kawan
- Simpan Template kawan
 |
| screenshot |
- Sekarang buka Blog kawan untuk melihat hasilnya :y
- Kalau tak ada masalah hasilnya seperti pada Blog Demo saya itu
Karena sekarang saya sedikit ada kesibukan untuk peng-Editan lebih lanjut tunggu postingan saya berikutnya, tapi jangan lupa berikan Pendapat / Komentar / Saran kawan :r;
Tampilkan Iklan diatas Thread Comment
Sekarang saya akan memberikan solusinya bagi kawan yang ingin menampilkan Iklan Sponsor di atas Komentar
Caranya sangat simple :
- Siapkan script Iklan Sponsor yang sudah di Parse » disini
- Masuk ke account Blogger dengan ID kawan
- Untuk jaga-jaga Simpan Template kawan dulu
- Beri tanda centang disamping
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> </b:if>
</h4>
<br/> <a target="_blank" href="http://www.ppcindo.com/click.php?a=6963&x=TVRNd09UQTFOekExTkMweU1qSXVNVEkwTGpFMU5pNHlNekE9&d=1&adurl=296234426&url=http%3A%2F%2Fpaydotcom.net%2Fr%2F59708%2Fbnp%2F26662416%2F5%2F"><img src="http://www.omniforexsignals.com/banners/468x60.gif" width="468" height="60" border="0" style="top: 40.857074455015095px; "></a>
Teks yang berwarna biru adalah contoh script Iklan, tapi di Parse dulu sebelum disimpan / ditaruh disana :x;
 |
| Tampilan Iklan |
- Jangan lupa simpan Template kawan :y;
Mengatasi Masalah Iklan di Kanan Komentar
Kreasi saya sebelumnya tentang Tempatkan Iklan disamping kanan Kotak Komentar, masalah yang kawan temukan yaitu Kotak Komentar akan selalu berada dibawah Iklan yang di sebelah kanan Komentar :r;
Cara mengatasinya sebagai berikut :- Masuk ke Account Blogger dengan ID kawan
- Pada Perancang template pilih Edit HTML
- Beri tanda cek pada Radio disamping Expand Widget Templates
- Cari <p><data:blogCommentMessage/></p> yang terakhir
Kode selengkapnya seperti berikut :
<h4 id='comment-post-message'><data:postCommentMsg/></h4><p><data:blogCommentMessage/></p><data:blogTeamBlogMessage/><a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></div>
Silahkan dipindahkan atau dipotong [cut] semuanya jangan "di delete" dan Paste-kan diantara </dl> </div> diatas </td><td valign='top'> seperti postingan saya sebelumnya atau selengkapnya sebagai berikut :
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>
</b:loop>
</dl>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></div>
</div>
</td><td valign='top'>
<div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:#FFF;'>
SIMPAN SCRIPT IKLAN / BANNER DISINI
<br/>
</div>
</td></tr></table>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
Simpan Template kawan, mudah-mudahan masalah tersebut teratasi :r;
Tampilkan Iklan disamping Kanan Komentar
Sekarang saya akan mencoba berbagi dengan kawan sesuai Judul yang saya berikan yaitu Simpan Iklan Sponsor disamping kanan Kotak Komentar :a mengapa harus disana ?
jawabannya sangat simple dan sangat realistis, coba kawan perhatikan Komentar Blog kawan, banyak tempat kosong disebelah kanannya, benar kan :z;
Caranya sangat mudah, masih ingat dengan Kreasi saya sebelumnya yaitu Cara Pasang Iklan diatas Kotak Komentar. Oke langsung saja ke cara pembuatannya :
- Masuk pada Account Blogger dengan ID kawan
- Pada Perancang Template pilih Edit HTML
- Beri tanda cek disamping Expand Template Widget
- Cari <b:loop values='data:post.comments' var='comment'>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
- Copy-paste kode berikut diatasnya,
<tr><td valign='top'>
<div style='width:480px;height:auto;padding:1px; align:left; border:0px solid #999'>
- maka selengkapnya akan menjadi seperti berikut :
<table border='0' cellpadding='1' height='auto' width='800'>
<tr><td valign='top'>
<div style='width:480px;height:auto;padding:1px; align:left; border:0px solid #999'>
<br/>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
- width='800' silahkan disesuaikan dengan lebar postingan blog kawan
- width=480px; disesuaikan dengan pengurangan tempat iklan
- selanjutnya cari <data:comment.body/> yang terakhir
- selengkapnya kurang lebih seperti berikut :
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>
</b:loop>
</dl>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
- Maka selengkapnya akan menjadi seperti berikut :
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>
</b:loop>
</dl>
</div> </td><td valign='top'> <div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:#FFF;'>
SIMPAN SCRIPT IKLAN / BANNER DISINI
<br/></div> </td></tr></table> </div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
- Teks yang berwarna biru adalah kode tambahan
- Tempatkan script iklan pada teks warna merah tersebut :r;
- Simpan Template kawan.
- Apa yang saya sampaikan ini hanya sebagai gambaran saja, dikarenakan Struktur Template berbeda-beda disamping keterbatasan saya sebagai Admin [Penulis].
- Artikel ini tidak bisa untuk Template Blog dengan Thread Comments
.gif)
