Kirik Blog: Widget

Showing posts with label Widget. Show all posts

Sunday 5 July 2015

Cara Menambahkan Widget Sitemap di Blog ala Arlina Design

Cara Menambahkan Widget Sitemap di Blog ala Arlina Design - Sitemap atau yang biasa di kenal daftar isi adalah widget yang membuat blog anda semakin tampak rapih dan seperti profesional , sudah banyak tutorial di luar sanah sebenarnya , namun pada pertemuan kali ini saya akan membagikan cara menambah sitemap ala mbak arlina .
Berbicara soal arlina design , siapa yang tidak mengenal dia? arlina adalah seseorang yang pandai coding dan pembuat template . jadi nama arlina sudah tidak asing lagi bagi para blogger , jika anda penasaran dengan siapa itu arlna design , anda bisa klik tautan berikut [Arlina Design]

Oke kita kembali ke topik , sekarang simak baik-baik ya

Buka Blogger > Pilih Blog > Laman
Buatlah sebuah laman baru , dan pada bagian HTML anda paste kode berikut

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>

Publikasi laman anda
Tahap berikutnya buka Tempate > Edit HTML
Cari kode </style>
Agar mempercepat pencarian kode </style> anda tekan CTRL + F
Copy-Paste kode di bawah ini tepat sebelum kode</style>

/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}

Simpan Template
Dan Lihat Laman yang tadi anda buat

Untuk mengganti jenis font dan warna dari sitemap tersebut , anda kreasikan sendiri sesuai selera

Cara Membuat Subscribe Box Di Blogger

13:38:00 Add Comment

Cara Membuat Subscribe Box Di Blogger - Subscribe box sebenarnya sama seperti follow by email ,cara kerjanya pun sama seperti follow by email yang sudah sudah , namun Subscribe box dapat membuat visitor lebih nyaman karena tampilannya yang begitu keren dan tampak profesional .
Jika anda ingin menambahkan subscribe box di blog anda silahkan simak baik baik .

1. Seperti biasa anda masuk ke www.blogger.com
2. Pilih blog > Template > Edit HTML
3. Cari kode ]]></b:skin>
4. Pastekan kode di bawah tepat di atas/sebelum kode ]]></b:skin>

/* CSS Subscribe Box */
#subscribe-box {width:auto;max-width:300px;height:auto;background-color:#222;}
#subscribe-box p {font-family:'Droid Sans';font-size:13px;color:#ccc;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#fafafa;color:#999;padding:10px;margin-top:10px;font-size:13px;font-family:'Droid Sans';width:91%;border:0;border:none;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:lightyellow;outline:none;border:none;color:#444;}
#subscribe-box .emailfield .submitbutton {background:#f56954;color:#fff!important;text-transform:uppercase;font-weight:bold;border:none;outline:none;width:99%;cursor:pointer;transition:all 0.4s ease-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#444;color:#fff;}
#subscribe-box .emailfield .submitbutton:hover{background:#dc5e4b;color:#fff;}
#HTML98 h2 {border-bottom:4px solid #eee;}
#HTML98 h2 span {border-bottom:none;margin-bottom:0;}

5. Jika sudah save template
6. Kemudian anda pergi ke Tata Letak
7. Add gadget > Html/Javascript
8. Pastekan kode di bawah , dan masukkan ke Html/javascript

<h2 class='title'>Subscribe Here</h2>
<div class='widget-content'>
<div id='subscribe-box'>
<p>Sign up here with your email.</p>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=AFusion', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input type='text' name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' value='Your Name'/>
<input type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input name='uri' type='hidden' value='AFusion'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe Now!'/>
</form>
</div>
</div>
</div>

9. Simpan , dan lihat blog

itu saja yang bisa saya sampaikan tentang Cara Membuat Subscribe Box Di Blogger , Kurang dan lebihnya mohon maaf .

Cara Membuat Popular Post Berwarna Seperti Template Evomagz Terbaru

13:22:00 Add Comment

Assalamualaikum wr.wb , bertemu lagi dengan saya selaku admin blog Ki-rik , pada pertemuan kali ini saya akan membahas Cara Membuat Popular Post Berwarna Seperti Template Evomagz Terbaru ,

Pernah lihat popular post berwarna seperti gambar di atas? ya, itu adalah Screen Shot dari popular post yang sangat mirip dengan Template Evomagz versi terbaru.

Untuk proses pembuatannya sangat mudah cukup tempel tempel saja , Namun meskipun cuma tempel tempel tetapi banyak blogger indonesia yang tidak tahu cara membuat/memasang popular post berwarna seperti mas sugeng .

Apabila anda sudah penasaran dengan cara pembuatannya , berikut cara pembuatan Popular Post Berwarna :

Buka www.blogger.com
Masuk ke Template>Edit HTML
Cari kode ]]></b:skin>
Jika sudah ketemu masukkan kode di bawah ini tepat di atas kode ]]></b:skin>

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 0 0 0 !important;
padding:10px 20px 10px 10px !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
font-family:arial, sans-serif !important;
font-size:12px;
font-weight:bold !important;
display:block;
position:absolute;
top:-5px;
right:-5px;
border-radius:16px;
background-color:#333;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #fff;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;
}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;
}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;
}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;
}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;
}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;
}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;
}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;
}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;
}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;
}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}

Selesai,, Bagaimana? sudah bisa ? sudah berwarna???
Demikian sedikit tutorial dari saya tentang Cara Membuat Popular Post Berwarna Seperti Template Evomagz Terbaru .

Cara Menambahkan Pop Up Like Box Facebook Page Di Blog

14:32:00 Add Comment

Pada pertemuan kali ini , saya akan membahas Cara Menambahkan Pop Up Like Box Facebook Page Di Blog , apakah anda tahu apakah itu Pop Up Like Box ? . Dengan adanya widget ini di blog anda , anda bisa sedikit menambah like fanspage anda .

Berikut cara menambahkan widgetnya :

Buka blogger > Tata letak > Add widget > HTML/Javascript
Pastekan kode berikut di HTML/Javascript

<style scoped='' type='text/css'> #fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);}#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}#fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;}#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;}#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}</style><script type='text/javascript'>//<![CDATA[jQuery.cookie = function (key, value, options) {// Pengaturan cookieif (arguments.length > 1 && String(value) !== "[object Object]") {options = jQuery.extend({}, options);if (value === null || value === undefined) {options.expires = -1;}if (typeof options.expires === 'number') {var days = options.expires, t = options.expires = new Date();t.setDate(t.getDate() + days);}value = String(value);return (document.cookie = [encodeURIComponent(key), '=',options.raw ? value : encodeURIComponent(value),options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IEoptions.path ? '; path=' + options.path : '',options.domain ? '; domain=' + options.domain : '',options.secure ? '; secure' : ''].join(''));}// Dapatkan cookieoptions = value || {};var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;};//]]></script><script type='text/javascript'>jQuery(document).ready(function($){if($.cookie('popup_facebook_box') != 'yes'){$('#fb-fanbox').delay(3000).fadeIn('fast');$('#fb-closebox, #fb-boxclose').click(function(){$('#fb-fanbox').stop().fadeOut('fast');});}$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});</script><div id='fb-fanbox'><div id='fb-boxclose'></div><div id='fb-boxview'><div id='fb-closebox'></div><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Ki-Rik-Download/1617089168575971&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:339px;height:200px;'></iframe></div></div>

Catatan :

Ganti Url https://www.facebook.com/pages/Ki-Rik-Download/1617089168575971 Dengan URL facebook fanspage anda
Jika ingin menampilkan widget ini setiap kali halaman blog di buka/ dilihat hapus kode $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); Dan menonaktifkan cookie : false

Source : http://arlinadesign.blogspot.com/2015/04/cara-menambahkan-pop-up-like-box-facebook.html

Cara Merubah Tampilan Widget Follow by Email Di Blog

19:20:00 1 Comment

Cara Merubah Tampilan Widget Follow by Email Di Blog - Pernah mendengar kata Follow by Email? sudah pasti , karena follow by email memang widget bawaan dari Blogger , lantas bagaimana cara Merubah tampilannya? . Oke untuk cara merubahnya nanti anda simak baik baik ya , dan untuk merubah seperti apa Follow by email sesudah di beri kode CSS di template silakan lihat demonya .

Mungkin untuk kalian yang menggunakan Template dari mbak arlina tidak usah repot repot menggunakan cara ini , karena template dari mbak arlina biasanya sudah terpasang .

dan untuk anda yang menggunakan template lain , dan jika ingin merubah tampilannya , baca baik baik nih .

Pasang terlebih dahulu widget Follow by emailnya
Jika sudah di pasang klik Simpan

Tahap selanjutnya

Klik Template > Edit Html
Cari kode ]]></b:skin>
Copy kode di bawah ini , tepat di atas kode ]]></b:skin>

/* CSS Follow by email */
div#FollowByEmail1{background:transparent;}
.FollowByEmail .widget-content {padding:0;}
.FollowByEmail .follow-by-email-inner {position:relative;}
.follow-by-email-inner {background:#fff;padding:15px;padding-bottom:0;color:#444;}
.FollowByEmail .follow-by-email-inner .follow-by-email-address {background:#fff;
color:#666;border:1px solid #e6e6e6;font-size:13px;height:32px;line-height:32px;padding-left:5px;width:100%;border-radius:2px 0 0 2px;transition:all 0.2s;}
.FollowByEmail .follow-by-email-inner .follow-by-email-address:focus {outline:none;color:#444;}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {background:#29abe2;
color:#fff;cursor:pointer;font-family:'Open Sans';font-size:15px;height:33.5px;line-height:33.5px;margin:0 2px;width:64px;z-index:0;border-radius:0 2px 2px 0;border-left:none;transition:all 0.2s;}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover {background:#42494f;color:#fff;}
.tabletd1 {width:100%;}
.tabletd2 {width:64px;}
.FollowByEmail .follow-by-email-inner input {font-family:'Open Sans',sans-serif;}