Tampilkan postingan dengan label Plugin. Tampilkan semua postingan
Tampilkan postingan dengan label Plugin. Tampilkan semua postingan

Selasa, 25 September 2012

Cara Pasang Share Tweet Meme

Jika kita tanya pada mbah google dengan kata kunci Cara Pasang Share Tweet Meme ini mungkin tulisan yang ke sribu kali. Tapi bagi saya tidak apa-apa bagi yang lagi belajar ngeblog ini mungkin bisa membantu dan yang terpenting adalah bisa berbagi bersama. tweet meme adalah layanan yang terkoneksi dengan twitter.
berikut caranya menurut para suhu blogger.
tulisan ini pun saya ambil dari sahabat blogger

tombol tweet meme di bawah judul artikel
1. Login ke blogger.
2. klik ke tab rancangan, lalu masuk ke edit HTML.
3. centang "expand template widget".
4. Cari kode <data:post.title/> (yang paling terakhir), biasanya kode lengkapnya begini:

        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>

5. Setelah ketemu, salin kode berikut lalu paste di bawah kode </b:if> (lihat kode pada no. 4):

    <div style='float:right; padding: 0 5px 5px 0;'>
    <script type='text/javascript'>
    tweetmeme_style = &#39;compact&#39;;
    tweetmeme_url = &#39;<data:post.url/>&#39;;
    tweetmeme_source = &#39;DAW-XP&#39;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
    </div> 

6. Simpan template.

Tombol Tweetmeme di Bawah Artikel
Cari kode <data:post.body/> lalu letakkan kode berikut di bawahnya:

    <div style='float:right; padding: 0 5px 5px 0;'>
    <script type='text/javascript'>
    tweetmeme_style = &#39;compact&#39;;
    tweetmeme_url = &#39;<data:post.url/>&#39;;
    tweetmeme_source = &#39;DAW-XP&#39;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
    </div> 

 5. Simpan template.





Read more

Sabtu, 21 Januari 2012

How to add Facebook connect to Blogger (deprecated)


All of you know that seems impossible to add Facebook connect to Blogger especially when you can’t upload file or even creating full HTML customized pages. or to implant Facebook connect to your website, you need to upload or create a cross-domain communication channel file called “xd_receiver.htm” under your domain, and I said Blogger don’t let you to do that . So how can we add it ?
Connect_white_large_long
To add Facebook connect into your blogs, you need to put a few snippets of  code in your template and create an application on Facebook. Those operations will take a couple of minutes then you are ready to write your own codes. (Visit Facebook Developer for more information). 

Create an application

we start with the creation of a new application :
  1. Go to http://www.facebook.com/developers/createapp.php to create a new application.
    Set up a new application
  2. Enter a name for your application in the Application Name field (The same name of your Blog). And agree Facebook terms then “save changes”.
    Application Name
  3. Take note of the API Key, you'll need this shortly.
  4. Click the Connect tab. Set Connect URL to “Your_Blog.blogspot.com”. now “save changes”
    Connect URL 

Adding a few snippets of code to your template

Blogger-HTML-Edit1
Now go to your Blog Dashboard> Layout > Edit HTML :
  1. Look for this tag in the top of your template code source :

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

    and add the code : “ xmlns:fb='http://www.facebook.com/2008/fbml' 

    <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'>
  2. Put the following code just before </head> tag :

    <script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php'type='text/javascript'/>

    PIC for step 1 & step 2
  3. Put the following code just before </body> tag : (Updated)

    <script type='text/javascript'> //<![CDATA[
       
    FB.init("YOUR_API_KEY_HERE"" ")//]]> </script> 

    PIC for step 3
  4. Save changes. now you are ready to add Facebook connect to your blog.
    PIC for step 4

Add Facebook connect

Login-Button :
<fb:login-button autologoutlink="True" length="short" background="white" size="large"></fb:login-button>
Profile Picture :
<fb:profile-pic uid="loggedinuser" facebook-logo="true" linked="false"></fb:profile-pic>
User Name :
<fb:name uid="loggedinuser" useyou="false"/></fb:name>
Live Stream Box :
<fb:live-stream event_app_id="YOUR_APPLICATION_ID" width="400" height="500">
Comments Box :
<fb:comments width='480'/>
Fan Box :
<fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections="10" width="300"></fb:fan>
For more help please visit http://wiki.developers.facebook.com/. as you can see it work correctly in my blog. try it out in your blogs on Blogger and don’t forget please to leave a link to your blog  to share your experience with Facebook Connect with other readers.
Read more

Jumat, 20 Januari 2012

Breadcrumbs for Blogger

With my new Blog Skin I also introduced a "Breadcrumb Trail" to my Blog. If this doesn't ring a bell, don't worry. Remember the Hansl & Gretchen fairy-tale?

Hansl and Gretchen were 2 kids from a very poor family. The parents were so poor that they had nothing to feed their children, and between them decided to take the kids into the forest and leave them to the wild animals. Hansl and Gretchen discovered these terrible plans, and decided to take pre-emtive measures. They took with them a piece of bread, and dropped breadcrumbs along the trail in order to find their way home. As might be expected, they didn't find home and they were captured by an evil witch (the breadcrumbs were eaten by birds, I guess). But the general idea got a strong foothold in the internet world, and nowadays you can find a breadcrumb trail on many a website to find your way back to the Home Page.



On the main page of my Blog there is no breadcrumb, because that is .... Home!

But as soon as you click on a specific post title, or on a label, or on an archive entry, you will see how the breadcrumb magically appears on top of the page:



Browse » Home » Tutorials » Breadcrumbs for Blogger

Now, here is an easy piece of code to put into your template, and breadcrumbs will be yours!

Step 1: Save your template
Go to the Layout tab, and click Edit HTML.
Download your template as an XML-file and save it onto your harddisk. If anything goes wrong, upload it again and not much harm will be done.

Step 2: Expand the widget code
Now check the checkbox to display your template's XML-code. Ready to hack? Here we go!

Step 3: Add a new Includable
We are going to modify the code of the Blog-widget. The default-widget uses a so-called "includable" (a chunk of code) to display a status-message above your posts when you have selected all posts with a certain label. We will turn off this default status message, and replace it with our breadcrumbs.

Scroll down through your expanded widget code and look for the following piece of code:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>

Now we will switch off the default status-message, by putting comments-brackets around it. (You can also delete the line, but I think leaving it there and commenting it out is more elegant in case you want to track back and debug).
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>
default status message disabled -->
<data:adStart/>

Now add the following line, that will call our breadcrumb includable:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>
default status message disabled -->
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

Immediately above this 'main' includable, insert our new breadcrumb includable:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

<b:includable id='main' var='top'>

You can also download the xml-code for the includable here:

Right-click the link, and select "Save as..." to save the XML-file on your harddisk. You can open it with Notepad, and copy-paste the code into your template.

Step 4: Add some CSS to the skin
The basic code of your breadcrumb is now in place. You can change its looks by adding a CSS-class .breadcrumbs to the skin of your Blog.
This is just an example:
<b:skin><![CDATA[/*

....

.breadcrumbs {
float: left;
width: 590px;
font-size: 11px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

....

]]></b:skin>

Step 5: Save your template
Save your template and view the results. Enjoy!

Troubleshooting
The code above was copy-pasted directly from my template into this post, so it should be error-free if your copy-paste it into your template.

Be sure to have the latest widget-versions in your template. As you maybe know (or then again, maybe not) the widgets code (such as your Blog Posts) is updated regularly by Blogger, providing you with new functionalities. But if you have hacked into the co@de of the widget, Blogger will NOT update to the newest version of the code.
If you want to be sure that the most recent version of a widget is present on your blog, you can click the "Return to default widgets"-link in the Layout-HTML editor.

If you do not feel comfortible about modifying the code of your blog, create a new testblog for testing purposes. Add some Lorem ipsum posts (filled with nonsense text and fake labels), and see if the breadcrumbs work. If everything works fine, port it to your real blog.
by@hans
Read more

Jumat, 18 Februari 2011

Selective display of widgets

Here is a small tutorial on how to display your blog's widgets selectively on your pages.

Let's suppose you only want to show your Profile Widget on your blog's Homepage, but not on the other pages. This is how it is done.



Step 1: Back up your template
Go to your blog's Layout Page, and enter HTML-edit mode. Download your template as an XML-file and store it in a safe place. In case template-hacking takes a wrong turn somewhere, you can upload your template-file again and you are back to normal.

Step 2: Find the Profile Widget
Expand the widget-code by checking the checkbox on the HTML-edit page. Now scroll down and look for the Profile Widget, that looks like this:

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
</div>
</b:includable>
</b:widget>



Step 3: Modify the widget code
Now we only want to display this widget if the page that we are looking at is our blog's Homepage. We will use a <b:if>-statement to check for this situation.
Insert the following (red) lines of code into the widget code:
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
</div>
</b:if>.na
</b:includable>
</b:widget>

The datafield data:blog.homepageUrl contains the url of your blog's homepage. The datafield data:blog.url holds the url of the current page. If they are the same (==) we are on the homepage and the widget should be displayed. If they are not the same, the widgetcode is skipped.

Step 4: Save your template
Save your template and display your blog.
by@hans
Read more

Post Summary And Read More

My old friends here are very well aware of the Peek-A-Boo-Posts hack that Ramani and I came up with several years ago. It required quite some template hacking and javascript too.

In this tutorial you will learn how to tweak your blog without any javascript to get a similar effect. On our homepage, all posts will show a short summary, followed by a "Read More" link. Clicking the "Read More"-link will bring up the post page with the full post text.

Step 1: Back up your
template
Open the Layout|Edit HTML-tab on your Dashboard, and download the
template as an XML-file to your harddisk. If anything goes wrong, upload it again and there will be no problem at all.





Step 2: Modify the
template code
Scroll down and look for the following piece of code:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

This is the piece of template code that displays the post-body on the screen. We have to add a few lines of code here:
<div class='post-body entry-content'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style type='text/css'>.restofpost {display:none;}</style>
</b:if>

<data:post.body/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>Read more...</a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Now save your template

Step 3: Modify your post template
In your Blog Settings you can modify the post template. Change it to:
<div class="summary">Type summary here</div>
<div class="restofpost">Type rest of post here</div>

And save your settings.
This will take care of all new posts. Type the summary text in between the summary-div-tags. Type the rest of the post between the other div-tags, and publish!

Step 4: Modify old posts
If you want older posts to have summaries as well, change every post and add a summary-div and restofpost-div.

And furthermore...
The summary-div is not really necessary, as the code only hides the restofpost-div if we are on the homepage. If you want some other styling for the summary, add CSS-tags to the skin-part of your blog.
by@hans
Read more

BlogToC Widget Released

The job is done. We now have a complete interactive Table Of Contents. Click the button in my sidebar to display the TOC. You can sort the TOC by Post Title by clicking the column header. Click it again, and it is sorted in reversed order. The same way if you want to sort the posts by date: newest first, or oldest first. And by clicking on one of the labels in the TOC filters all posts with that label. Click the column header to return to the full ToC.

Here is how to install it to your Blog.

Step 1: Back Up your Template.

Step 2: Add a HTML Page Element
Edit your template in HTML-mode, and look for the <b:section> with id=main. This is the section that holds the Blog posts.
Change that line as follows:

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Save the template and switch to the Page Elements Tab.
Add a HTML page element above your Blog Posts element.
Leave the title blank. Add the following html:
<div id="toc"></div>

Save your template.

Step 3: Add a Sidebar HTML-element
Now add a HTML-element to the sidebar. Set the title to "TOC".
For the contents, enter:
<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://kpn.planet.nl/oosti468/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>


Replace YOURBLOG with the name of ...... exactly.
Oh yes, and save.

Step 4: Add custom styles to the skin of your template.
New id's and classes are:
#toc : the div-wrapper that contains the TOC
.toc-header-col1 : header of column 1
.toc-header-col2 : header of column 2
.toc-header-col3 : header of column 3
.toc-entry-col1 : cell in column 1
.toc-entry-col2 : cell in column 2
.toc-entry-col3 : cell in column 3

For your convenience: Beautiful Beta uses the following styling:
<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
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:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>


You can add this to the <b:skin>-part of the template, or insert it in the sidebar widget.

Enjoy! by hans
Read more

Senin, 14 Februari 2011

exchanging links-script

What is the benefit of exchanging links? and how? The question that perhaps we often hear or read from the bloggers, especially bloggers who are beginners who just made a blog. Exchanging links or link exchange is very useful as fostering friendships among blogs, socialization is very important and can increase traffic and page rank blogs your blogs linked  many people, the page rank you will quickly, it is necessary to note the contents of your blog and SEO. So how to exchange links? Is to put a link blog or website other people who you want and people will also put a link on your blog or website link . example http://plugins-blogger.blogspot.com/.Link this blog is you can install on left / right blog sidebar or below blog.to this blog, my blog link pairs in addition to the blog right surtitle Blog .Ada some way to put a link blog.Cara-way is as follows:
For users new blogger How to: 1 1. you log on Blogger. 2.clik Layout in Dashboard. 3.clik Add a gadget, select the Link List, will appear Configure Link List 4. title on the Title List, for instance Blog Friends 5.for box Number of Links To Show in List, enter the number of links that want  left blank. 6. Sorting box, let contain Do not Sort. 7. New Site URL box, enter the address of the link blogs. 8. New Site Name box, enter the name of the link blogs entered at step 7. 9. Add Link and Save. If you want to add other blogs link, just click Edit on the Gadget you are already follow steps 6 through 9.
How to: 2 (Use auto scroll) 1.you log on Blogger 2. Layout in Dashboard. 3. Add a gadget, then HTML / Javascript. 4.input code below. 








    onmouseover='this.stop()' onmouseout='this.start()' width="25%">
  • test


Read more