Showing posts with label Widget Blog. Show all posts
Showing posts with label Widget Blog. Show all posts
Friday, August 9, 2013
Assalamu'alaikum Sobat BS, Alhamdulillah kali ini aku masih di kasih kesempatan untuk nulis Tips Blog yang unik nih.
Kalo Sobat cari di gugel, dengan keyword "Membuat label blog" pasti banyak banget hasilnya kan.? Tapi Tips Blog untuk Membuat Label Blog yang aku share unik, karena label blog yang kita pasang akan melayang. Untuk demonya, sobat bisa liat di samping kiri blog ini atau Screen Shout di bawah.
 |
| Label Blog Melayang |
Oke, mungkin udah banyak sobat yang dulu pengin pasang dan belum ada tutorialnya, akhirnya pake cara licik yaitu meng-klik CTRL + U. Ga apa, kalo kalian udah ngambil codenya duluan tanpa pemberitahuan aku.
Sekarang kita mulai tutorialnya :
- Masuk ke Blogger Sobat.
- Masuk ke bagian Template dan klik tulisan Edit HTML.
- Cari kode </body>, lalu letakkan kode di bawah ini setelah kode </body>.
<script src='http://sakahayangdotcom.googlecode.com/files/mmenu.js' type='text/javascript'></script>
<script type='text/javascript'>
resizereinit=true;
nama_menu = "KATEGORI / LABEL";
hdingbgcolor = "#000080"; //warna bground nama_menu
hdingcolor = "#FFFFFF"; //warna text nama_menu
barbgcolor = "#191970"; //warna bground bar
barcolor = "#FFFFFF"; //warna text
menu[1] = {
id:'menu1',
fontsize:'100%',
linkheight:22,
hdingwidth:210,
menuItems:[ // REQUIRED!!
["KATEGORI"], //Judul kelompok Menu1
["Artikel Islam", "http://biellsoft.blogspot.com/search/label/Islami", ""],
["Artikel Puasa", "http://biellsoft.blogspot.com/search/label/Ramadhan",""],
["Berita Unik", "http://biellsoft.blogspot.com/search/label/Unik", ""],
["Berita Baru", "http://biellsoft.blogspot.com/search/label/Informasi", ""],
["Bisnis DAHSYAT", "http://biellsoft.blogspot.com/search/label/Bussines", ""],
["Berita IT", "http://biellsoft.blogspot.com/search/label/Info%20IT", ""],
["Download E-Book", "http://biellsoft.blogspot.com/search/label/Ebook", ""],
["Motivasi Hebat", "http://biellsoft.blogspot.com/search/label/Motivation", "_new"],
["Belajar Online", "http://biellsoft.blogspot.com/search/label/Education", "_new"],
["Tema Windows", "http://biellsoft.blogspot.com/search/label/Theme", "_new"],
["LABEL", "", ""], //Judul kelompok Menu2
["Tutorial Hacking", "http://biellsoft.blogspot.com/search/label/Hacking",""],
["Tutorial Editing", "http://biellsoft.blogspot.com/search/label/Editing",""],
["Tutorial Blogger", "http://biellsoft.blogspot.com/search/label/Tips%20Blog", ""],
["Widget Blog", "http://biellsoft.blogspot.com/search/label/Widget%20Blog",""],
["Trik SEO", "http://biellsoft.blogspot.com/search/label/SEO", ""]
]}; // Jangan dihapus
make_menus();
</script>
<!--eof menu-->
Catatan :
-Ganti kode warna merah, dengan alamat URL label sobat.
-Untuk Sobat yang sudah terbiasa dengan code-code html, Sobat bisa modifikasi sendiri sesuai keinginan Sobat.
Mungkin untuk kali ini cuma Widget ini yang bisa aku share untuk Sobat BS, terima kasih untuk Sobat yang selalu hadir dan berbagi tentang blog ini di facebook, twitter, ataupun media sosial lainnya. Dan, akhir kata
BiellSoft; Share Everything | Everything I Learn | Must Be Share
Wassalamu'alaikum Warahmatullahi Wabarakatuhu
Wednesday, June 26, 2013
Untuk Sobat BS Blogger udah pada tau kan apa itu Related Post atau dalam bahasa Indonesianya Artikel Terkait. Artikel Terkait/Related Post ini berfungsi untuk menghubungkan Sobat BS dari satu artikel ke artikel yang lain, tetapi masih dalam satu Label. Ada juga yang berfungsi menghubungkan artikel satu ke artikel yang lain tetapi beda Label, dan kali ini saya akan share yang menghubungkan sesama label dan dengan tambahan fungsi scroll.
 |
| Contoh penggunaa Artikel Terkait dengan scroll |
Oke, kalau sudah melihat Screen Shout nya, mari kita pelajari cara membuatnya.
- Masuk ke akun blogger Sobat BS dan klik Tata Letak.
- Setelah itu, klik Edit HTML (Sebelumnya download/unduh template Sobat agar aman).
- Cari kode ]]></b:skin> (Gunakan CTRL+F atau F3).
- Lalu Copy dan Paste kode di bawah ini, sebelum kode ]]></b:skin>
- Setelah itu, cari kode <data:post.body/> dan Copy-paste kode dibawah ini dibawah kode <data:post.body/>
- Save/simpan Template dan lihat hasilnya. ^_^
- Dan akhirnya Klik CTRL+D.
<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
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('albri').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>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
NB : Untuk Sobat BS yang dapet banyak kode <data:post.body/>, masukin aja kode ke-2. Jadi, cari kode <data:post.body/> yang ke-2, BUKAN YANG PERTAMA !
Sekian, bila ada kekurang pahaman silahkan komen di kotak komentar :)
Sunday, May 5, 2013
Assalamu'alaikum Warahmatullahi Wabarakatuh
Malam Sobat BS, seperti biasa nih waktunya update blog. Nah, pada malam hari ini, saya mau kasih Tips Blogging tentang Cara Membuat Kotak Komentar Facebook. Setelah tadi sama mas Amdhas ngomongin masalah emoticon dan padding/jarak paragraf nih, ternyata beliau memang udah ahli Sobat BS dalam hal CSS ataupun bahasa HTML. Yang mau kenalan cari aja di oom 'Gugel'
Udah pada tau dong yang namanya Facebook? Yapz, jejaring social NOMOR 1 yang belum bisa di kalahkan(tapi sepertinya mau kalah) oleh Twitter. Nah pastinya juga dong, Sobat BS sudah biasa melihat kotak komenta entah itu di Status temen, Fans Page, ataupun di grup Fb. Kali ini kita ber-kreasi untuk membuat Kotak Komentar di Blog nih.
Ikuti langkahnya dengan cermat ya ^_^ SEKALI LAGI YANG TELITI YA ^_~
7. Kemudian Anda cari kode </head>
8. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>
9. Kemudian klik save, dan lihat hasilnya.
Jika semua langkah-langkah membuat komentar blog dan facebook berdampingan ini Anda ikuti dengan benar, maka seharusnya Anda berhasil melakukannya. Karena langkah diatas sudah saya lakukan dan berhasil seperti yang Anda lihat milik saya. Namun jika Anda memiliki struktur template yang berbeda, Anda dapat meletakkan kode pada poin no.8 dibawah kode <div class='comments' id='comments'> yang kedua saja.
Keuntungan memakai kotak komentar facebook adalah bentuknya thread comment, sehingga dapat membalas komentar. Selain itu juga terintegrasi dengan facebook, sehingga komentar bisa dibagikan (share) di facebook si komentator. Keuntungan lainnya dengan kotak komentar facebook adalah lebih menghemat tempat (space).
Source Sekitar Dunia UNIK
Malam Sobat BS, seperti biasa nih waktunya update blog. Nah, pada malam hari ini, saya mau kasih Tips Blogging tentang Cara Membuat Kotak Komentar Facebook. Setelah tadi sama mas Amdhas ngomongin masalah emoticon dan padding/jarak paragraf nih, ternyata beliau memang udah ahli Sobat BS dalam hal CSS ataupun bahasa HTML. Yang mau kenalan cari aja di oom 'Gugel'
Udah pada tau dong yang namanya Facebook? Yapz, jejaring social NOMOR 1 yang belum bisa di kalahkan(tapi sepertinya mau kalah) oleh Twitter. Nah pastinya juga dong, Sobat BS sudah biasa melihat kotak komenta entah itu di Status temen, Fans Page, ataupun di grup Fb. Kali ini kita ber-kreasi untuk membuat Kotak Komentar di Blog nih.Ikuti langkahnya dengan cermat ya ^_^ SEKALI LAGI YANG TELITI YA ^_~
1. Login ke account blogger Anda.
2. Klik rancangan lalu klik Edit HTML.
3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan.
4. Klik pada kode HTML, karena desaign baru oleh blogger[dot]com
5. Jika sudah, cari kode ]]></b:skin> (gunakan ctrl + f untuk mempermudah pencarian)
6. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>
2. Klik rancangan lalu klik Edit HTML.
3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan.
4. Klik pada kode HTML, karena desaign baru oleh blogger[dot]com
5. Jika sudah, cari kode ]]></b:skin> (gunakan ctrl + f untuk mempermudah pencarian)
6. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
7. Kemudian Anda cari kode </head>
8. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Anda disini' 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><span style="font-size: 50%">Widget edited by <a href="http://biellsoft.blogspot.com/" target="_blank" rel="follow">BiellSoft</a></span>
Perhatikan tulisan yang berwarna merah di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda maka ID Anda berada pada tulisan yang berwana biru. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka. Udah ngertikan ? jika sudah maka Akan saya lanjut.
8. Kemudian cari kode <div class='comments' id='comments'>
Keterangan: Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode
<div class='comments' id='comments'> yang pertama dan kedua.
8. Kemudian cari kode <div class='comments' id='comments'>
Keterangan: Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode
<div class='comments' id='comments'> yang pertama dan kedua.
<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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Perhatikan angka yang berwarna merah dan biru diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi. Dan perhatikan pula kode yang berwarna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.
contoh :
contoh :
<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='2' width='400'/>
</b:if>
</div>
<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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div class='comments comments-page' id='blogger-comments-page'> ( hapus salah satu)
9. Kemudian klik save, dan lihat hasilnya.
Jika semua langkah-langkah membuat komentar blog dan facebook berdampingan ini Anda ikuti dengan benar, maka seharusnya Anda berhasil melakukannya. Karena langkah diatas sudah saya lakukan dan berhasil seperti yang Anda lihat milik saya. Namun jika Anda memiliki struktur template yang berbeda, Anda dapat meletakkan kode pada poin no.8 dibawah kode <div class='comments' id='comments'> yang kedua saja.
Keuntungan memakai kotak komentar facebook adalah bentuknya thread comment, sehingga dapat membalas komentar. Selain itu juga terintegrasi dengan facebook, sehingga komentar bisa dibagikan (share) di facebook si komentator. Keuntungan lainnya dengan kotak komentar facebook adalah lebih menghemat tempat (space).
Source Sekitar Dunia UNIK
Friday, September 21, 2012
Tabber yang biasa kita lihat di sidebar dapat berfungsi untuk menghemat space dalam sebuah blog, sehingga blog lebih kelihatan rapi. Banyak cara dalam membuat tabber ini, sebelumnya saya juga pernah membuat tutorial membuat tab view menu ini bisa dilihat pada membuat Tab View Menu Tanpa Edit HTML dan Tab View di Blogspot. Kelemahan dari tabber sebelumnya adalah kita mesti memasukkan URL postingan satu persatu ke dalamnya sehingga tidak secara otomatis jika ada postingan baru akan muncul di tabber.
Nah kali ini saya akan memberikan satu tips untuk Anda semua dalam membuat tabber, sangat sederhana dan tidak memperberat loading blog. Tips ini saya dapat dari Pak Abu Farhan, master blogger Indonesia yang sudah malang melintang di dunia persilatan.. eh dunia perbloggeran. Sebenarnya membuat tabber atau tab view menu ini juga bisa dengan menggunakan fungsi accordion tapi terkadang scriptnya bentrok dengan script lain dengan script silder misalnya, bisa sih diatasi tapi mesti merubah jquery menjadi no conflict, ah ribet deh pokoknya.
Untuk hasil akhir tabber ini gambarnya seperti diatas atau seperti yang ada pada bagian samping kanan. Baiklah, langsung saja pada cara pemasangannya :
- Login ke blogger dengan akun anda
- Di dashboard klik Tata Letak > pilih Edit HTML centang expand widget templates
- Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
- Letakkan kode berikut di atas kode ]]></b:skin>
- .widget-wrapper2{
- border:1px solid #494e52;
- background-color:#636d76;
- padding:10px;
- }
- .widget-tab {
- background:#c9dbdd;
- font-family:Arial,Helvetica,sans-serif;
- padding:5px !important;
- }
- .widget-tab ul {
- margin:0px;
- padding:0px 5px 0 5px;
- }
- .widget-tab ul li {
- list-style:none;
- border-bottom:1px dotted #a4bddf;
- padding-top:4px;
- padding-bottom:4px;
- font-size:12px;
- }
- .widget-tab ul li:last-child {
- border-bottom:none;
- }
- .widget-tab ul li a {
- text-decoration:none;
- color:#3e4346;
- }
- .widget-tab ul li a small {
- color:#8b959c;
- font-size:9px;
- text-transform:uppercase;
- font-family:Verdana, Arial, Helvetica, sans-serif;
- position:relative;
- left:4px;
- top:0px;
- }
- .tab-content ul li a:hover {
- color:#a59c83;
- }
- .tab-content ul li a:hover small {
- color:#baae8e;
- }
- .active-tab{
- background:#FFFFFF url(http://3.bp.blogspot.com/-F2JucRkielU/Ty7NHVdzBkI/AAAAAAAAFG8/d4ZqQOFH3Bg/s1600/sidebar.png) repeat-x scroll left bottom !important;
- color:#282E32 !important;
- }
- ul.tab-wrapper {
- margin:0px; padding:0px;
- margin-top:5px;
- margin-bottom:6px;
- }
- ul.tab-wrapper li{
- background:url(http://1.bp.blogspot.com/-Tjycy0172Vo/Ty7IS2D7OCI/AAAAAAAAFGc/kx8jg6X9ywE/s1600/menu-m1.png) repeat-x top;
- color:#FFF;
- cursor:pointer;
- display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;
- font-size:9px;
- font-weight:700;
- line-height:2em;
- list-style-image:none!important;
- list-style-position:outside!important;
- list-style-type:none!important;
- margin-right:1px;
- text-align:center;
- text-decoration:none;
- text-transform:uppercase;
- padding:8px 14px
- }
- Tabber ini butuh sebuah jquery.min.js untuk bisa bekerja dengan baik, anda harus menambahkan kode di bawah ini diatas </head> (jika pada template anda sudah terinstall, langkah ini dilewati saja) :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
- Setelah itu, tambahkan kode berikut ini di bawah script jquery diatasKeterangan :
<script type='text/javascript'>
var starttab=0;
var endtab=3;
var sidebarname="sidebar";
</script>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/tabber.js' type='text/javascript'/>
var starttab=0;
var endtab=3;
var sidebarname="sidebar";Starttab adalah nomor awal untuk widget yang Anda pilih, mulai menghitung dari 0. Endtabadalah jumlah untuk widget terakhir yang ingin ditampilkan dalam tabber. Endtab=3 berarti widget yang ditampilkan dalam tabber ada 4 (0, 1, 2, 3 empat kan jumlahnya).Sidebarname adalah id sidebar letak tabber nantinya, bisa anda letakkan di kiri menggantinya dengan sidebarleft atau bisa juga diletakkan di tengah, yang perlu diperhatikan Anda harus mencari id dimana tabber ini akan diletakkan, biasanya tempatnya seperti kode di bawah ini (perhatikan yang warna kuning) :<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'> - Setelah itu Save/Simpan template, sudah selesai.
Setelah itu anda tinggal membuat 4 widget yang akan ditampilkan dalam tabber, ingat dikasih judul semua ya widgetnya. Itu tadi tutorial dasar dari saya untuk membuat tabber sederhana dengan jquery, silahkan dimodifikasi sendiri warna serta tampilan lainnya. Sesuaikan dengan komposisi warna blog Anda sehingga tabber ini semakin memperindah tampilan blog dan pengunjung semakin betah berlama-lama di blog Anda. Selamat mencoba dan semoga bermanfaat.....
Sourche (c) SCC7
Sunday, September 16, 2012
Pengen membuat widget hilang ketika di klik Home Page dan muncul ketika kita klik Postingan . . ngak usah susah-susah dan mudah sekali kok ..
Gini caranya >>
Untuk membuat widget hanya tampil di Home Page saja , kita hanya perlu menyisipkan kode seperti ini
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Dan di beri kode penutup seperti ini
</b:if>
Kalau membuat widget hanya tampil di posting saja , kodenya seperti ini
<b:if cond='data:blog.pageType == "item"'>
Dan di beri kode penutup seperti ini
</b:if>
Nah ... udah tahu kode untuk menghilangkan widgetnya kan ... yuk kita lanjutkan ...
Sebelumnya kamu harus tahu widget yang akan di hilangkan dan pahami struktur widgetnya ..
Pertama masuk ke Edit HTML < jangan lupa beri centang Expand Template Widget >
Cari kode <b:widget id=
Contoh lengkapnya seperti di bawah ini >>
<b:widget id='HTML14' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Sisipkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> di bawah kode <b:includable id='main'>
Dan kode penutup </b:if> di bawah kode <b:include name='quickedit'/>
Hingga menjadi seperti ini :
<b:widget id='HTML14' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
""Contoh Widget Hanya Tampil di Home Page dan Hilang di Postingan""
Jika sudah Simpan .. lihat hasilnya ..
Nah simpel kan ..
Pasti semua dah pada bisa ...
Selamat mencoba ya ....
Lihat Artikel Asli di http://www.bloginfonews.com/2010/05/cara-membuat-widget-hanya-tampil-di.html#ixzz26eDLSUeM
Gini caranya >>
Untuk membuat widget hanya tampil di Home Page saja , kita hanya perlu menyisipkan kode seperti ini
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Dan di beri kode penutup seperti ini
</b:if>
Kalau membuat widget hanya tampil di posting saja , kodenya seperti ini
<b:if cond='data:blog.pageType == "item"'>
Dan di beri kode penutup seperti ini
</b:if>
Nah ... udah tahu kode untuk menghilangkan widgetnya kan ... yuk kita lanjutkan ...
Sebelumnya kamu harus tahu widget yang akan di hilangkan dan pahami struktur widgetnya ..
Pertama masuk ke Edit HTML < jangan lupa beri centang Expand Template Widget >
Cari kode <b:widget id=
Contoh lengkapnya seperti di bawah ini >>
<b:widget id='HTML14' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Sisipkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> di bawah kode <b:includable id='main'>
Dan kode penutup </b:if> di bawah kode <b:include name='quickedit'/>
Hingga menjadi seperti ini :
<b:widget id='HTML14' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
""Contoh Widget Hanya Tampil di Home Page dan Hilang di Postingan""
Jika sudah Simpan .. lihat hasilnya ..
Nah simpel kan ..
Pasti semua dah pada bisa ...
Selamat mencoba ya ....
Lihat Artikel Asli di http://www.bloginfonews.com/2010/05/cara-membuat-widget-hanya-tampil-di.html#ixzz26eDLSUeM
Saturday, August 4, 2012
Hay sobat P.I.C, jumpa lagi dengan saya. Kali ini saya memposting artikel Cara Membuat atau Memasang Permalink Seo Di Blog. Mungkin ada yang belum tau apa itu Permalink. Permalink adalah salah satu Optimasi Seo On Page yang berguna untuk memasang permanen link dan bertujuan untuk menambah internal link pada posting blog. Jika sobat belum tau, Permalink itu kotak admin di bawah postingan blog Atau biasanya seperti gambar dibawah ini!.
Berikut ini adalah langkah-langkah cara membuat/memasang seo permalink di blog:
1. Login ke akun Blogger sobat.
2. Klik Rancangan >> Edit Html.
3. Kasih centang pada "Expand Template Widget"
4. Cari kode ]]></b:skin> . Untuk mempermudah tekan CTRL + F.
5. Letakkan kode berikut tepat DIATAS kode ]]></b:skin> .
.buatpermalinkblogger
{border: 2px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:6px;}
.buatpermalinkblogger a
{background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}
6. Setelah itu, Cari kode <data:post.body/> .
7. Jika kode sudah ditemukan, maka ada 2 atau lebih kode <data:post.body/> . Jika template sobat menggunakan READMORE otomatis, pilih kode nomor 2 dan ganti dengan kode berikut!.
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<div class='buatpermalinkblogger'>
<center><small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'>
<data:blog.pageName/></a></u> sebagai sumbernya.</small></center><div style="text-align: right;">
[<blink><a href="http://putupunyablog.blogspot.com/2012/07/cara-membuat-permalink-seo-di-blog.html" target="_blank">Pasang Widget</a></blink>]</div>
</div>
<b:else/>
<p><data:post.body/></p>
</b:if>
8. Jika semua sudah, Jangan lupa klik "Simpan Template". Jika permalink nya belum muncul, letakkan kode dibawah nomor 7 tadi ke kode <data:post.body/> nomor 3.
Sekian postingan kali ini. Jika sobat belum paham, silahkan berkomentar dibawah ini!.
(c) PutuPunyaBlog
Thursday, July 19, 2012
Cara Membuat Tulisan Basmalah di Awal Setiap Postingan - Kali ini saya akan membahas yaitu bagaimana cara membuat/memasang tulisan basmalah tepat di awal setiap postingan blog. Nah, tentunya diwajibkan bagi Member P.I.C yang beragama islam yang sedang membaca postingan ini harus membaca basmalah yaitu "Bismillahirrahmanirrahim", sebelum makan, sebelum melakukan aktivitas, supaya mendapatkan rahmat dan ridho oleh Allah SWT. Dimulakan dengan Bismillah Disudahi dengan Alhamdulillah, namun untuk yang akhir Alhamdulillah saya belum menemukan caranya.
Oke, berikut cara membuatnya :
1. Login ke Blogger Member P.I.C
2. Klik Rancangan > Edit HTML > Centang Expand Template Widget
3. cari kode <data:post.body/>
4. Copy kode dibawah ini tepat diatas kode <data:post.body/>
5. Bila sudah, Klik Simpan Template
Selamat mencoba :)
Sunday, July 8, 2012
Huuuufffftttttt....
Udah lama nih saya ga Share tentang Tips Blogging, maaf ya Member P.I.C kalo ada Member P.I.C yang udah nunggu Tips Blogging dan karena juga ada yang Request (nah, itu gunanya Request) maka saya hadirkan kepada Member P.I.C Tips Blogging tentang Memberi Join Us on Facebook (kehabisan kata-kata).
Kalo ada yang bingung Saya kasih Screen Shoutnya aja deh..
Ntar kalo si 'Tikus' diarahin akan jadi seperti :
Member P.I.C ada yang tau namanya..??
lah ga usah di kasih nama juga ga papa.
OK, begini Tutorialnya.
- Login ke Blog Member P.I.C.
- Pilih Template --> Edit HTML --> Lanjutkan
- Cari code </head> (Gunakan F3 atau Klik CTRL + F untuk mempermudah)
- Setelah itu salin code berikut di bawah code </head>
5. Ganti tulisan ID FANS PAGE dengan ID FANS PAGE Member P.I.C
6. Klik Save dan Lihat Hasilnya ^_^
Jika ada masalah atau kebingungan jangan sungkan untuk bertanya.
Sekian Wassalamu'alaikum Warohmatullahi Wabarokatu.
Purwokerto-Incredible, Never Die to Share Education
Saturday, June 30, 2012
Setelah Share tentang Merubah Font Blog, ada juga Tips Blogging yang update dan mungkin dicari banyak bloggers. Apakah itu...??
Yapz, Merubah Background Blog. Sama halnya dengan Widget Merubah Font Blog, Widget ini memudahkan Member P.I.C atau visitor Blog Member P.I.C agar lebih nyaman melihat Blog Member P.I.C
Begini caranya :
Yapz, Merubah Background Blog. Sama halnya dengan Widget Merubah Font Blog, Widget ini memudahkan Member P.I.C atau visitor Blog Member P.I.C agar lebih nyaman melihat Blog Member P.I.C
Begini caranya :
- Login ke Blog Member P.I.C.
- Klik Rancangan.
- Pilih Edit HTML.
- Klik Tambah Widget.
- Cari yang HTML/JavaScript.
- Masukkan Kode Berikut
- Klik Save dan Lihat Hasilnya. ^_^
Semoga Bermanfaat, kalo Pengin share ilmunya boleh, tapi JANGAN LUPA CANTUMKAN SUMBERNYA.
Thursday, June 28, 2012
Dipostingan kali ini saya akan share tentang cara membuat Simple Navbar pada blog. untuk demonya Seperti Ini 
. Bagaimana, Member P.I.C tertarik untuk mencobanya di blog Member P.I.C. silahkan ikuti tutorial berikut :
Berikut langkahnya..
. Bagaimana, Member P.I.C tertarik untuk mencobanya di blog Member P.I.C. silahkan ikuti tutorial berikut :Berikut langkahnya..
- Log in ke blogger Member P.I.C
- Masuk ke Template > Edit Html
- Tekan Ctrl + F, lalu cari kode ]]></b:skin>
- Setelah ketemu copy code dibawah ini lalu letakkan di atas kode ]]></b:skin>
#DADnavbar{
font-family: Comic Sans Ms;
font-size: 11pt; color: white;
background:url(/favicon.ico) no-repeat center left fixedblack;
border: 1px solid red;
padding: 3px;
z-index: 100000000;
top: 1px; left: 1px; right: 1px;
position: fixed;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
}
#DADnavbar .dmnavleft{float:left;font-weight:bold;padding:2px 10px;}
#DADnavbar .dmnavright{float:right;padding:0px 2px;}
- Kemudian cari lagi kode </body>
- Dan lalu copy lagi kode di bawah ini dan letakkan diatas code </body>
<div id='DADnavbar' style='position:fixed;'>
<span class='dmnavleft'>
GANTI TEXT INI DENGAN KATA KATA-KATA MEMBER P.I.C SENDIRI (isi navbar sebelah kiri)
</span>
<span class='dmnavright' style='font-family:verdana;'>
GANTI TEXT INI DENGAN KATA KATA-KATA MEMBER P.I.C SENDIRI atau widget lain (untuk isi navbar sebelah kanan)
</span></div>
Bila Member P.I.C ingin mengeditnya, silahkan lihat keterangan berikut.
- Ganti yang berwarna emas dengan font yang Member P.I.C inginkan.
- Ganti yang berwarna pink dengan ukuran font yang Member P.I.C inginkan.
- Ganti yang berwarna kuning dengan warna teks yang ada di navbar dengan warna sesuka Member P.I.C.
- Ganti yang berwarna coklat dengan warna background navbar yang Member P.I.C inginkan.
- Ganti yang berwarna merah dengan ukuran, style, dan warna border / garis tepi sesuka Member P.I.C sendiri. Jangan nanya cara gantinya gimana, cari di Google.
- Untuk yang berwarna hijau, top itu artinya, nanti navbar Member P.I.C akan melayang sisi atas. Jika Member P.I.C ingin memindahkan navbar Member P.I.C agar tampil di sisi bawah browser, tinggal ganti saja dengan bottom.
- Untuk kode yang ditulis miring, itu pengaturan untuk garis meengkung di setiap sudut navbar Member P.I.C . Jika Member P.I.C ingin sudut navbar Member P.I.C tetep runcing, atau bentuk navbarnya tetap persegi (gak pakai melengkung) maka tinggal hapus saja kode tersebut.
- Ganti yang berwarna orange dengan teks / kata-kata atau apalah yang ingin Member P.I.C masukkan ke dalam navbar Member P.I.C . Terserah apa saja boleh asal muat
Selamat mencoba, dan semoga bermanfaat....
Silahkan Di Share Jika Bermanfaat, tapi jangan lupa sertakan Sumbernya
Silahkan Di Share Jika Bermanfaat, tapi jangan lupa sertakan Sumbernya
Subscribe to:
Posts (Atom)
VPS
Popular Posts
-
Ini adalah tampilan FansPage Youtube Channel saya pada Tab Youtube Adsense. Pada tab tersebut ada sepuluh video tentang Youtube Adsense.... -
Assalamu ‘alaikum warahmatullah wa baraakatuh Oke Sobat BS, kali ini aku mau berbagi Trik Komputer nih. Dan Trik kali ini adalah Memblokir...
-
Purwokerto-Incredible - Kali ini, saya akan memberikan artikel menarik tentang 10 orang yang paling berpengaruh di dunia teknologi dan i... -
Assalamu'alaikum Sobat BS. Yang beragama islam, ada yang udah puasa hari ini? kalo Aku hari besok, karna tadi malem ga liat bulan ni...
-
In the world of technology, Web 3.0 is often referred to as the next generation of web development and design. It promises to revolutioniz... -
Good Day Cappucino Hayo, siapa yang belum pernah nyobain kopi gaul paling enak ini? Kopi instan dan cappuccino Good Day, kopi gaul paling... -
Jumpa lagi dengan BS, kali ini saya bikin video demo aplikasi operasi matriks pada Android. Aplikasi ini saya temukan di google play store.... -
Inilah poin-poin cara menaikkan traffic website. I. Pendahuluan A. Latar belakang pentingnya meningkatkan trafik web B. Tujuan dari membuat...
-
Ketika membaca sebuah artikel mengenai ini, aku sedikit takut. Apa yang aku impikan ternyata mempunyai resiko yang sangat tinggi. Oke jika... -
Hehehehehhe :D lama ga bagi-bagi ilmu Pelajaran, nih saya kasih Ilmu Pendidikan Kewarganegaraan Bab Bela Negara, itu Bab I di pelaj...
