| Portal berita | Technologi Information |
Teknik Komputer |

Showing posts with label Widget Blog. Show all posts
Showing posts with label Widget Blog. Show all posts

Friday, August 9, 2013

On 10:42:00 AM by Muhammad Abdurrahman in    8 comments
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.

Membuat Label Blog Melayang di Blog
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-->
  • Setelah itu, klik Save/Simpan dan Sobat lihat hasilnya.
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

On 12:49:00 AM by Muhammad Abdurrahman in ,    No comments
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.

Membuat artikel terkait dengan fungsi scroll
Contoh penggunaa Artikel Terkait dengan scroll
Oke, kalau sudah melihat Screen Shout nya, mari kita pelajari cara membuatnya.

  1. Masuk ke akun blogger Sobat BS dan klik Tata Letak.
  2. Setelah itu, klik Edit HTML (Sebelumnya download/unduh template Sobat agar aman).
  3. Cari kode ]]></b:skin> (Gunakan CTRL+F atau F3).
  4. Lalu Copy dan Paste kode di bawah ini, sebelum kode ]]></b:skin>

  5. Setelah itu, cari kode <data:post.body/> dan Copy-paste kode dibawah ini dibawah kode <data:post.body/>
  6. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;
    maxNumberOfPostsPerLabel = 10;
    maxNumberOfLabels = 3;
    function listEntries10(json) {
    var ul = document.createElement(&#39;ul&#39;);
    var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
    json.feed.entry.length : maxNumberOfPostsPerLabel;
    for (var i = 0; i &lt; maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;
    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    alturl = entry.link[k].href;
    break;
    }
    }
    var li = document.createElement(&#39;li&#39;);
    var a = document.createElement(&#39;a&#39;);
    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 &lt; json.feed.link.length; l++) {
    if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;b&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;albri&#39;).appendChild(div1);
    }
    }
    }
    function search10(query, label) {
    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
    + label +
    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
    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 = &quot;<data:label.name/>&quot;;
    var test = 0;
    for (var i = 0; i &lt; labelArray.length; i++)
    if (labelArray[i] == textLabel) test = 1;
    if (test == 0) {
    labelArray.push(textLabel);
    var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
    labelArray.length : maxNumberOfLabels;
    if (numLabel &lt; maxLabels) {
    search10(homeUrl3, textLabel);
    numLabel++;
    }
    }
    </b:loop>
    </b:loop>
    </script>
    </div>
    <script type="text/javascript">RelPost();</script>
    </div>
    </b:if>
  7. Save/simpan Template dan lihat hasilnya. ^_^
  8. Dan akhirnya Klik CTRL+D.
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

On 12:29:00 AM by Muhammad Abdurrahman in ,    3 comments
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 ^_~


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>


.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.



<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
<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 :
<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'>
<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

On 2:37:00 PM by Muhammad Abdurrahman in ,    No comments

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.

tabber sidebar maskolis

Untuk hasil akhir tabber ini gambarnya seperti diatas atau seperti yang ada pada bagian samping kanan. Baiklah, langsung saja pada cara pemasangannya :
  1. Login ke blogger dengan akun anda
  2. Di dashboard klik Tata Letak > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas kode ]]></b:skin>
    view plainprint?
    1. .widget-wrapper2{  
    2. border:1px solid #494e52;  
    3. background-color:#636d76;  
    4. padding:10px;  
    5. }  
    6.   
    7. .widget-tab {  
    8. background:#c9dbdd;  
    9. font-family:Arial,Helvetica,sans-serif;  
    10. padding:5px !important;  
    11. }  
    12.   
    13. .widget-tab  ul {  
    14. margin:0px;  
    15. padding:0px 5px 0 5px;  
    16. }  
    17. .widget-tab  ul li {  
    18. list-style:none;  
    19. border-bottom:1px dotted #a4bddf;  
    20. padding-top:4px;  
    21. padding-bottom:4px;  
    22. font-size:12px;  
    23. }  
    24. .widget-tab  ul li:last-child {  
    25. border-bottom:none;  
    26. }  
    27. .widget-tab  ul li a {  
    28. text-decoration:none;  
    29. color:#3e4346;  
    30. }  
    31. .widget-tab  ul li a small {  
    32. color:#8b959c;  
    33. font-size:9px;  
    34. text-transform:uppercase;  
    35. font-family:VerdanaArialHelveticasans-serif;  
    36. position:relative;  
    37. left:4px;  
    38. top:0px;  
    39. }  
    40. .tab-content  ul li a:hover {  
    41. color:#a59c83;  
    42. }  
    43. .tab-content  ul li a:hover small {  
    44. color:#baae8e;  
    45. }  
    46.   
    47. .active-tab{  
    48. background:#FFFFFF url(http://3.bp.blogspot.com/-F2JucRkielU/Ty7NHVdzBkI/AAAAAAAAFG8/d4ZqQOFH3Bg/s1600/sidebar.png) repeat-x scroll left bottom !important;  
    49. color:#282E32 !important;          
    50. }  
    51.   
    52. ul.tab-wrapper {  
    53. margin:0pxpadding:0px;  
    54. margin-top:5px;  
    55. margin-bottom:6px;  
    56. }  
    57.   
    58. ul.tab-wrapper li{  
    59. background:url(http://1.bp.blogspot.com/-Tjycy0172Vo/Ty7IS2D7OCI/AAAAAAAAFGc/kx8jg6X9ywE/s1600/menu-m1.png) repeat-x top;  
    60. color:#FFF;  
    61. cursor:pointer;  
    62. display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;  
    63. font-size:9px;  
    64. font-weight:700;  
    65. line-height:2em;  
    66. list-style-image:none!important;  
    67. list-style-position:outside!important;  
    68. list-style-type:none!important;  
    69. margin-right:1px;  
    70. text-align:center;  
    71. text-decoration:none;  
    72. text-transform:uppercase;  
    73. padding:8px 14px  
    74. }  
  5. 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'/>
  6. Setelah itu, tambahkan kode berikut ini di bawah script jquery diatas
    <script type='text/javascript'>
    var starttab=0;
    var endtab=3;
    var sidebarname=&quot;sidebar&quot;;
    </script>
    <script src='https://masolis-javascript.googlecode.com/svn/trunk/tabber.js' type='text/javascript'/>
    Keterangan :
    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'>
  7. 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

On 10:53:00 PM by Muhammad Abdurrahman in ,    2 comments
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 == &quot;item&quot;'> 

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 != &quot;&quot;'>
<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 != &quot;&quot;'>
<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

On 11:46:00 AM by Muhammad Abdurrahman in , ,    2 comments

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!.


memasang permalink seo di blogspot sangat bermanfaat untuk optimasi blog kita. karena salah satu kegunaan yang paling penting untuk membuat seo permalink di blogspot adalah untuk mengdongkrak posisi posting blog di search engine.

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 == &quot;item&quot;'>
<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!.

Thursday, July 19, 2012

On 3:27:00 PM by Muhammad Abdurrahman in ,    No comments
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

On 10:34:00 PM by Muhammad Abdurrahman in ,    2 comments

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.
  1. Login ke Blog Member P.I.C.
  2. Pilih Template --> Edit HTML --> Lanjutkan
  3. Cari code </head> (Gunakan F3 atau Klik CTRL + F untuk mempermudah)
  4. 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

On 9:23:00 PM by Muhammad Abdurrahman in ,    No comments
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 :
  • 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.

Ikuti kiriman artikel-artikel seputar Komputter, Hacking, Editing, Blogging dengan mengirimkan email anda untuk berlangganan artikel kami. Enter your email address:


Delivered by FeedBurner

Thursday, June 28, 2012

On 11:19:00 PM by Muhammad Abdurrahman in ,    2 comments
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..
  • 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
Ikuti kiriman artikel-artikel seputar Komputter, Hacking, Editing, Blogging dengan mengirimkan email anda untuk berlangganan artikel kami. Enter your email address:


Delivered by FeedBurner

Tuesday, June 26, 2012

On 10:48:00 AM by Muhammad Abdurrahman in ,    No comments
بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

Siang Member P.I.C, kali ini saya akan memberi Tutorial Seputar Blogging setelah dari tadi Menulis tentang Hacking.
Tutrial kali ini adalah Memberi Efek Salju pada Cursor Blog.



Wah gimana caranya...??

Langsung aja, ikuti Tutorial Di Bawah ini :

1. Login blog
2. Tata Letak --> Tambah Widget --> HTML/JavaScript
3. Masukkan Code Berikut :


4. Klik Save dan Lihat Hasilnya.

Untuk var colour="Black" Member P.I.C bisa ganti dengan warna yang Member P.I.C inginkan ^_^

Pastikan Sumbernya Jika Ingin Menyebarkan Tips Ini...!!